SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 41 of 41
  1. #26
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    $(function() {
     
    	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript">
     
     
    function initSlickbox(content, toggler) {
        // hides the slickbox as soon as the DOM is ready
        $(content).hide();
        // toggles the slickbox on clicking the noted link  
        $(toggler).click(function() {
            $(content).slideToggle('normal');
     
            if ($(this).html() === 'Hide Details') {
                $(this).html('More Details');
            } else {
                $(this).html('Hide Details');
            }
            return false;
     
     
        });
     
    }
     
     
    </script>
    initSlickbox('#myContent', '#slick-toggle');
    initSlickbox('#myContent1', '#slick-toggle1');
    </script>
     
    });

    I'm not sure where to start and end the wrap as I don't understand the coding language }); etc...

    I have tried putting it other places and get syntax errors in Dreamweaver on line with }); or </head>

  2. #27
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And I just see this written at the top of my page as text...

    initSlickbox('#myContent', '#slick-toggle');
    initSlickbox('#myContent1', '#slick-toggle1');

  3. #28
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Code JavaScript:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript">
     
    $(document).ready(function() {
    function initSlickbox(content, toggler) {
        // hides the slickbox as soon as the DOM is ready
        $(content).hide();
        // toggles the slickbox on clicking the noted link  
        $(toggler).click(function() {
            $(content).slideToggle('normal');
     
            if ($(this).html() === 'Hide Details') {
                $(this).html('More Details');
            } else {
                $(this).html('Hide Details');
            }
            return false;
     
     
        });
     
    }
     
     
    </script>
    initSlickbox('#myContent', '#slick-toggle');
    initSlickbox('#myContent1', '#slick-toggle1');
    </script>


  4. #29
    SitePoint Guru downtroden's Avatar
    Join Date
    Dec 2004
    Location
    illinois
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe I'm missing something, but after seeing the markup, why not refactor the js to take advantage of the structure instead? Only minor modifications are needed and the resulting js is MUCH easier to digest for someone who is just starting to dip their toes in the js pool.

    Add a class to your anchor links called "slick-toggle" and another class to your content divs "toggle_content", then the below jquery should do everything you're wanting.

    Code JavaScript:
    $('.slick-toggle').click(function() {
            $(this).next('.toggle_content').slideToggle('fast');
            if ($(this).html() === 'Hide Details') {
                $(this).html('More Details');
            } else {
                $(this).html('Hide Details');
            }
    });
    your brain reacts in the same way whether you are
    looking at something or thinking about it...

  5. #30
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have no idea what you're talking about, sorry, as this is the very first time using such a coding language and I'm really struggling to understand what's going on. I just need to wrap the above code correctly in the jQuery wrapper so it all works. I'm in a rush to get this fixed so I can update my online store and start to sell products. I've been coding my website since January trying to fix issues with flash and scrolling not working on mobile devices and such... it's a nightmare when you know nothing.

    This is the last bit I need to fix then I can crack on with the rest.

    Thanks in advance

  6. #31
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have moved the initSlickbox inside the function and no longer see that at the top of my page as text, so that's good. I hope, though think you said to leave them out?

    The show/hide and name change still doesn't work however, so I'm stuck at the mo and really need the help.

    Code JavaScript:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript">
     
    $(document).ready(function() {
    function initSlickbox(content, toggler) {
        // hides the slickbox as soon as the DOM is ready
        $(content).hide();
        // toggles the slickbox on clicking the noted link  
        $(toggler).click(function() {
            $(content).slideToggle('normal');
     
            if ($(this).html() === 'Hide Details') {
                $(this).html('More Details');
            } else {
                $(this).html('Hide Details');
            }
            return false;
     
     
        });
     
     
     
    initSlickbox('#myContent', '#slick-toggle');
    initSlickbox('#myContent1', '#slick-toggle1');
     
    }
    </script>
    </script>

  7. #32
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    With a little tweaking and cursing at the screen and my lack of knowledge I have fixed it

    Code JavaScript:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript">
     
    $(document).ready(function() {
    function initSlickbox(content, toggler) {
        // hides the slickbox as soon as the DOM is ready
        $(content).hide();
        // toggles the slickbox on clicking the noted link  
        $(toggler).click(function() {
            $(content).slideToggle('normal');
     
            if ($(this).html() === 'Hide Details') {
                $(this).html('More Details');
            } else {
                $(this).html('Hide Details');
            }
            return false;
     
     
        });
     
    }
     
    initSlickbox('#myContent', '#slick-toggle');
    initSlickbox('#myContent1', '#slick-toggle1');
     
    });
    </script>
    </script>

    Please can I get some feedback on what I was doing wrong so to learn for future.

    Thanks ever so much for your comments and help

  8. #33
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hi all,

    Is there some code I can add to the <head> to hide all the div's on load? As currently the text is visible as the page loads, then disappears when it's finished.

    Thanks

  9. #34
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by Ashley Smith View Post
    Hi all,

    Is there some code I can add to the <head> to hide all the div's on load? As currently the text is visible as the page loads, then disappears when it's finished.

    Thanks
    Please

  10. #35
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Ashley Smith View Post
    Is there some code I can add to the <head> to hide all the div's on load? As currently the text is visible as the page loads, then disappears when it's finished.
    One way is to put a class name on each of the content sections for the slick toggle, perhaps called something like "slick-content" so that you can then use a CSS declaration to set their display to none. That way the page loads without them being visible, but the downside is that those who don't run javascript won't be able to see any of that content.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #36
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Please can you kindly show me how to do that in full (I'm in a rush to get this site up to sell my products), and explain why users wouldn't be running Javascript. I would have thought everyone would be by default for their browsers.

    Cheers

  12. #37
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Ashley Smith View Post
    Please can you kindly show me how to do that in full
    Here is what your existing div currently looks like:

    Code:
    <div id="myContent" style="background-color: #CCC; padding: 10px;">
        ...
    </div>
    Using inline styles is considered to be "bad form", so let's include the inline style as a part of a consistent class for the content areas.

    Code css:
    .slick-content {
        background-color: #CCC;
        padding: 10px;
    }

    Now that CSS style can be applied to the content div like this:

    Code html4strict:
    <div id="myContent" class="slick-content">
        ...
    </div>

    You can also now make use of the class name on each of the content sections with the following type of jQuery selector:

    Code javascript:
    $('.slick-content')

    Quote Originally Posted by Ashley Smith View Post
    and explain why users wouldn't be running Javascript. I would have thought everyone would be by default for their browsers.
    There are many situations where scripting won't be available for the web page visitor.

    • Sometimes people choose to deliberately disable javascript as one of the more extreme security measures that can be taken.
    • Other times it's disabled by the IT staff at the business that someone works at.
    • There are many mobile devices that don't support javascript.
    • Then there are the search engine spiders to think about. Many of them don't support javascript either, so what the search engine sees of your page is only what is visible without scripting.


    You don't need to do anything about those problems. But they are useful to be aware of in case you receive any comments or complaints about the situation.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #38
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the detailed info, I'll look into editing the code today and see if I render any issues.

    Under the CSS I just need to thus add a display property of "none" for the class? And, the jQuery selector will allow me to add such functions...???

    Cheers

    Edit; If JS is disabled, could I add an IF argument to the code stating "if JS is disabled on browser or mobile device, unhide div's"?

  14. #39
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Ashley Smith View Post
    If JS is disabled, could I add an IF argument to the code stating "if JS is disabled on browser or mobile device, unhide div's"?
    Nope, that's not possible. About the next-best solution that it possible is for scripting to hide those areas when the page first loads, which seems to be the solution that you had before.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #40
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool. Thanks again for the help, it's been dearly appreciated Paul

  16. #41
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    One way is to put a class name on each of the content sections for the slick toggle, perhaps called something like "slick-content" so that you can then use a CSS declaration to set their display to none. That way the page loads without them being visible, but the downside is that those who don't run javascript won't be able to see any of that content.
    I think I'm going to leave it as is with them being shown on load. It's not all that intrusive on a fast connection, and it'd be hassle to code and then add a noscript asking users to enable js if they don't have it on. Saves a few steps.



Bookmarks

Posting Permissions

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