Jquery content pop up and jquery content slider

Chris Hick · 11-14-2010, 05:28 AM

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?

Philip M · 11-14-2010, 10:55 AM

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.