Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2018
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Works in Chrome/Safari, not in other browsers?

    The following is a link to my website (I'm not advertising, I swear lol):

    Tawnwen's Commissions

    If you click on "View product info" in the cards, the card expands to show additional information. This works in Chrome and mobile Safari. However, in other browsers (ex. Firefox, edge), the card expands but the cards below it do not move down to give space. This causes the cards below to block out the expanded information.

    The mechanism is simple Javascript. Upon clicking the button, a function runs which changes the expanded area's display property from "none" to "block". For some reason, Chrome/Safari moves the cards below it downwards, but not in other browsers. I'd recommend testing this yourself.

    I have little knowledge of differences between browser support. Does anyone know what's causing this? Let me know if more info is needed.

    Thank you!

  2. #2
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,273
    Thanks
    4
    Thanked 476 Times in 464 Posts
    That entire site has major issues here for me in all browsers -- likely from the non-semantic markup, flipping the bird at accessibility by using PX for all measurements, and use of JavaScript to do things we haven't needed JS for in over a decade.

    ... and the use of display:none also means that search engines might be ignoring that content, just a warning. Decades ago people abused display:none for content cloaking, so search engines started just flat out ignoring anything set to it. Hence the apo/static trick of for "none" setting it to position:absolute; left:-999em; then to show it setting it back to position:static; (which ignores left/top/right/boittom)

    But the big problem in FF seems to be that none of your scripts are loading due to being blocked by your CSP. Did you set up the content security policy on purpose? That's what's killing your scripts. Odd Chrome is ignoring the CSP settings.

    I would probably axe that pointless JS and use the input checkbox trick with :checked and sibling selectors. Doesn't work in IE8/earlier, OH WELL.

    Code:
    <input type="checkbox" id="toggle_sectionName" class="toggle" hidden>
    <label for="toggle_sectionName" hidden></label>
    <div>
      <p>Your product info Here</p>
      <label for="toggle_sectionName" class="toggle_hide" hidden></label>
    </div>
    Code:
    @media (min-width:1px) { /* sneaky trick to target CSS3 browsers only */
    	.toggle, /* we have to set the input to show or IE will ignore clicking on it :( */
    	.toggle + label,
    	.toggle_hide {
    		display:block;
    	}
    	.toggle + label:before {
    		content:"View Product Info";
    	}
    	.toggle_hide:before {
    		content:"Show Less";
    	}
    	.toggle, /* hide it the 'safe' way */
    	.toggle + label + div {
    		/* aPo hides without search engines ignoring content*/
    		position:absolute;
    		left:-999em;
    	}
    	.toggle:checked + label {
    		display:none;
    	}
    	.toggle:checked + label + div {
    		position:static;
    	}
    } /* end CSS3 only section */
    Proper working section show/hide, adding/removing the first label as needed, without a line of JavaScript required. The magic is the :checked attribute and that clicking on an associated label has the exact same effect as clicking on the input.

    The CSS is in a media query so that IE8/earlier will just show the content all the time, again, OH WELL. Still beats using JS for this. Because the LABEL text is CSS only functionality we use generated content to add those. When the input is checked we hide the adjacent label and show the div after it.

    Oh, and the "hidden" attribute is relatively new, and is ideal for telling modern accessibility UA's to ignore control-type elements. I just wrote and article on that a few days ago:

    The 'hidden' Attribute - Finally a way to 'abuse' INPUT safely - CUTCODEDOWN

    We want that since HTML is about MORE than just visual users on CSS capable browsers.

    Hope that helps -- but you've got a lot of other issues in there; P around non-paragraph elements, P doing numbered heading's job, a complete lack of logical document structure, scripting only elements static in the markup... It needs some loving care.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  3. Users who have thanked deathshadow for this post:

    Tawnwen (Jan 5th, 2019)

  4. #3
    New to the CF scene
    Join Date
    Jul 2018
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @deathshadow

    Hey, thanks for the information/mini-critique. To be frank, I stopped watching web dev tutorials around the Javascript functions portion and thought "this'll take care of everything".

    Just to make sure I'm understanding correctly, the CSS begins by throwing everything in the div off-screen, and then once the input is "checked" by clicking on the label, it hides "View Product Info" and brings the div back to a static position, correct?

    To be frank cont. most of the conventions mentioned above are new to me, though I'll try to be more conscious of them where I can.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •