Topic Closed

I activated JS and changed the addon version to 3.0.5 on Github Simpl_Blog addon fork. It is run on Edge, how you say.

In Opera can be used this style, inspired from here:

<style>
details > summary::-webkit-details-marker {
  list-style-type: "\25BA";
}
</style>

<details>
  <summary>Restyled for Opera</summary>
This run in Opera browser.
</details>

 

 

 

11 months ago#11517

mabu
290 Posts
3.8K Downloads
4 Themes
8 Plugins
At https://florincatalin.000webhostapp.com/Jurnal it is still the same in edge and in opera/chrome ? (perhaps i am too fast ?)
Edited: 11 months ago#11518

I haven't changed my site yet (I don't have the data for the ftp connection here), but I will change them tonight.

I tested on Chrome v. 78 and this is ok:

<style>
details > summary::-webkit-details-marker {
  list-style-type: "\25BA";
}
</style>

<details>
  <summary>Restyled for Opera</summary>
  <ul>
<li>This run in Opera browser.</li>
<li>And also in Chrome browser.</li>
</details>

11 months ago#11519

I also updated the site, everything is ok. Firefox, IE and Edge is solved.

For Opera and Chrome I think it should be something like this:

<style>
details > summary::-webkit-details-marker {
  list-style-type: "\25BA";
}
ul li::marker {
list-style-type: none;
}
</style>

11 months ago#11520

mabu
290 Posts
3.8K Downloads
4 Themes
8 Plugins

This solution removes all arrows in Edge and Opera - but in opera the years are now ok and the arrows-problem is shifted to categories

but my : summary::-webkit-details-marker { display: none; }

summary:before { content: "+";  color: green; margin-right: 5px; }

details[open] summary:after { content: "-"; }  also generates shifted +- --- see You tomorrow....

Edited: 11 months ago#11521

mabu
290 Posts
3.8K Downloads
4 Themes
8 Plugins

Here i uploaded for You a preliminary version for test .

I have neither tested it in IE (in edge it functions) nor on Smartphones. It doesnt function in  Safari 3.7.

Perhaps You can find some more bugs ? The problem is that also  <li><span.. in staticgenerator.php 244 is interpreted as <li><div.. in Chrome  - and more.

The better method is browser detection (and not like<!--[if IE ]> <link href="ie.css" rel="stylesheet" type="text/css"> <![endif]-->)

If (BrowserName == "Opera")  )  and if (navigator.appName.indexOf("Opera") != -1){.. are for the template (page head js )  or added with native javascript : document. or with Jquery

  I hope i will find a final solution - with Your cooperation !

Edited: 11 months ago#11522

I tested the version you uploaded for the test. Firefox - ok, Chrome - ok, Opera - ok, Edge (v. 41) and IE 11 - failed.

I will continue to test it the next few days. It is good that it works on Firefox and Chrome. I'll see the code the next few days to see what happens.

11 months ago#11523

I overwrote the addon files on my blog with your's preliminary version then I regenerated the gadget and can now use it for testing on different browsers.

Online can be found at http://browsershots.org/
(select none initially, then choose which browsers you want and which operating system)

you can also go to https://www.browserling.com (free just for Windows 7 and some browsers)
11 months ago#11524

mabu
290 Posts
3.8K Downloads
4 Themes
8 Plugins

The above cant help. I work at xampp. The problem is that the various browsers interpret the summary-details unequal. The li-shift is only helpful if the browser shifts (ie , edge and safari do not)

Chrome makes out of  span.simple_blog_gadget_year  -- a-- div.simple_blog_gadget_year..... there  are some but not sufficient css-hacks for all browsers.

Therefore the only safe possibility is to make a jquery - browser  - switch (in a loaded switch,js) l ike

if ($.browser.mozilla) {
$('head').append('<link rel="stylesheet" type="text/css" href="ffox.css">');}

if ($.browser.chrome) {
    $('head').append('<link rel="stylesheet" type="text/css" href="chrom.css">');}
 
if ($.browser.opera) {
    $('head').append('<link rel="stylesheet" type="text/css" href="oper.css">');}
 
if ($.browser.safari) {
    $('head').append('<link rel="stylesheet" type="text/css" href="saf.css">');}
    
if ($.browser.msie) {
    $('head').append('<link rel="stylesheet" type="text/css" href="ie.css">');}   and load the css browser specific.
    
--- which functions in jquery 11.3 only together with  jquery migrate 1.30 (loaded parralel) - As You are the developer You should try this solution first...

Edited: 11 months ago#11525

juergen
1.5K Posts
55.9K Downloads
16 Plugins
design, web development & visual effects

Hi florin and mabu

if I understand the question right and you wish to make all archive gadget levels collapsible and collapsed by default, this is what I'd do.

This solution is for the original SimpleBlog (up to ver. 3.0.4) gadget markup structure, which looks like this:

<div class="simple_blog_gadget">
  <div>
    <span class="simple_blog_gadget_label">Archives</span>
    <ul>
      <li>
        <div class="simple_blog_gadget_year">2018</div>
        <ul>
          <li>
            <a class="blog_gadget_link">November (2)</a>
            <ul class="simple_blog_category_posts nodisplay">
              <li>
                <a href="/Blog/My-Post-1">My Post 1</a>
              </li>
              <li>
                <a href="/Blog/My-Post-2">My Post 2</a>
              </li>
            </ul>
          </li>
        </ul>
        </ul>
          <li>
            <a class="blog_gadget_link">December (1)</a>
            <ul class="simple_blog_category_posts nodisplay">
              <li>
                <a href="/Blog/My-Post-3">My Post 3</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>
        <div class="simple_blog_gadget_year">2019</div>
        <ul>
          <li>
            <a class="blog_gadget_link">January (1)</a>
            <ul class="simple_blog_category_posts nodisplay">
              <li>
                <a href="/Blog/My-Post-4">My Post 4</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

This would be the jQuery Code:

$(function(){ // function call when DOM is ready, omit when using PHP $page->jQueryCode .= '…'; 

  $('.simple_blog_gadget ul ul').hide(); // initially hide all but the first level ULs 

  $('.simple_blog_gadget_year')
    .css('cursor', 'pointer')   // will be clickable, so let's change the cursor to pointer 
    .on('click', function(){    // click handler
      $(this).siblings('ul').slideToggle();
    })
    .find('.blog_gadget_link')
      .off('click') /* this will unbind the original click handler set by SimpleBlog, 
                     * will only work if this function is called later than SimpleBlog's
                     */
      .on('click', function(){
        $(this).siblings('ul').slideToggle();
      });

}); // closing of DOM ready function 

 

I hope it's still helpful.

Cheers,
Jürgen

11 months ago#11526

Thanks to Jürgen for the intervention and the solution offered, I will test it today.

For mabu:
the specific solution for Edge and IE 11 is
margin-top: 0px;
instead of
margin-top: -20px! important

I know that browsers interpret the code unequally, and IE, Edge and Safari have a specific way, different from Chrome and Firefox. This is also why many years ago I gave up using IE for C # encapsulation and chose another solution, which I am very pleased with. Many people have given up on IE and Edge browsers and are using Chrome, Firefox or Opera, which are modern, open source, secure and do not pose compatibility issues with HTML5 standards. Chrome and Firefox are also available for MacOS and various Linux distributions, so that's not a problem. From my point of view the problem is already solved, I am not interested in the browser's war. I did not test yet on the smartphone, but there things are evolving quickly, so I think that in the future they will adapt to the HTML 5 standard.

Thanks again to Jürgen for the intervention and the solution offered,
all the best,
Florin

11 months ago#11527

mabu
290 Posts
3.8K Downloads
4 Themes
8 Plugins

Of course the specific solution for Edge and IE 11 is
margin-top: 0px;
instead of
margin-top: -20px! important    - but only in a ie-edge - specific css-file.

In my proposed solution You load jquery migrate 1.30 and make a javascript out of the above listing ((  if ( $.browser.webkit ) { alert( "This is WebKit!" ); } )).

Then You remove my footer from the style.css and distribute it as necessary in the specific browser-files.

But I hope that Jürgens method will be helpful.

Edited: 11 months ago#11528

I tested the solution proposed by Jürgen on Firefox, Chrome, IE 11, Edge and Opera and it works perfectly! Tonight I will modify my site.

Jurgen's solution is better than ours. Thank you, Jürgen! Also, thanks to mabu for the effort made in finding a solution.

The solution proposed by Jürgen can be used to upgrade Simple_Blog to version 3.5 and can be uploaded to the Typesetter site so it can be used by everyone.

I think from now on we can close this topic.

Many thanks to all,
Florin

11 months ago#11529

mabu
290 Posts
3.8K Downloads
4 Themes
8 Plugins
I have updated my version at github and tested it in Xampp - ok -  but i must say that the arrows of the details - summary - version make a better impression. This should be done - evtl. colored arrows - before publishing a new version in the repository ! It can be done by adding classes to the li's and ul's. Also the hanging around posts should be styled (background , font-size, etc.). The internet sets value of style !
Edited: 11 months ago#11530

juergen
1.5K Posts
55.9K Downloads
16 Plugins
design, web development & visual effects

The solution proposed by Jürgen can be used to upgrade Simple_Blog to version 3.5 and can be uploaded to the Typesetter site so it can be used by everyone.

[…] but i must say that the arrows of the details - summary - version make a better impression. This should be done - evtl. colored arrows - before publishing a new version [...]

When making plugins that deal with dynamically created content, one of the harder decisions always is, how much default front-end style and user experience behavior it should come with.

I personally prefer as-lean-as-possible solutions that …
  A) can still be easily overruled via custom CSS and
  B) use as little as possible JavaScript for client-side behavior, which can be hard or even impossible to modify, once initiated.

When it comes to SimpleBlog, there are a few things in the markup that should be improved for better styling possibilities and DOM manipulation.
The problem is, SimpleBlog is very popular and any changes in the html output will cause issues with existing and custom styled installations, when the plugin gets the update.
That's why I always use customized versions, adapted for the current use case.

IMO SImpleBlog should in fact become part of Typesetter core. This would allow much better (Bootstrap) integration and interoperability with other plugins.
But that's nothing done in a few hours, at least not for me.

 

Edited: 11 months ago#11531

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register