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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts

    Jquery content pop up and jquery content slider

    Ok, I would post my entire data here but then yall would be reading insane amounts of script. I've got a div content jquery slider on my site I am making and it works beautifully in all browsers(took me a while). Then, I decided why not have it where when people click on a "read more" link that it pops up a box, instead of directing to the new page, and displays the contents of a div. It would not work at all. My question is there a possible way to do this?
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,989
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Is this what you are wanting? If not I suggest you post in the jQuery section of this forum and show the code you have developed but which does not work.

    Code:
    <body onload = "toggleTxt()">
    
    <div id = "theText"></div>
    <p id = "but1" style = "color:red; font-family:Arial; font-size:10pt; position:absolute; right:95px"; onclick = "toggleTxt()">View More [+]</p>
    
    <script type = "text/javascript">
    
    var tflag = 0;
    function toggleTxt() {
    var txt = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit erat sed enim convallis tincidunt. Vivamus vestibulum hendrerit blandit. Donec sagittis magna justo. Sed vehicula auctor mauris quis dictum. Aliquam erat volutpat. Phasellus at quam nibh, sed dictum neque. Maecenas lectus arcu, sagittis quis dapibus sed, lobortis id velit. Vestibulum ut tortor neque. Quisque porttitor ornare massa sit amet ornare. Vivamus arcu augue, fringilla in adipiscing eget, viverra sit amet purus. Praesent euismod, velit ac aliquet elementum, velit lectus laoreet magna, vel auctor diam libero non turpis. Fusce eu sapien in enim dapibus iaculis. Cras et molestie orci. Sed nec est elit, eu suscipit quam." +  "<br><br>" +
    "Phasellus accumsan aliquam quam, vitae fermentum purus pellentesque quis. Aliquam viverra lacus at tortor scelerisque vestibulum eget vitae orci. Etiam volutpat neque non erat facilisis egestas. Duis vulputate lacus eget nulla mattis vulputate. Fusce vehicula libero dolor, vitae tempor nulla. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. "
    
    if (tflag == 0) {
    document.getElementById("theText").innerHTML = txt.substring(0,253) + "......";
    tflag = 1;
    document.getElementById("but1").innerHTML = "View More [+]";
    }
    else {
    document.getElementById("theText").innerHTML = txt;
    document.getElementById("but1").innerHTML = "View Less [-]";
    tflag = 0;
    }
    }
    </script>
    Instead of an ugly pop-up box you should use a suitably styled <div>. Example:-


    Code:
    <style type = "text/css">
    body{text-align: center;}
    
    .theDiv {width:500px;margin-left:auto;margin-right:auto;text-align:left;background:#FFFFB0;border:1px;border-style:solid;padding:5%;}
    
    .buttn {width:400px}
    </style>
    
    <body onload = "toggleTxt()">
    
    <div class = "theDiv" id = "theText"></div>
    <p class = "buttn" id = "but1" style = "color:red; font-family:Arial; font-size:10pt; position:absolute; right:95px"; onclick = "toggleTxt()">View More [+]</p>
    Quizmaster: What do you do with Edam and Emmental?
    Contestant: Put it in a sock.
    Last edited by Philip M; 11-14-2010 at 11:36 AM.


  •  

    Posting Permissions

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