UPDATED to INCLUDE more CODE
Our webdesigner has had a stroke and I've been trying to finalise some of the design in his absence. It seems he is unlikely to ever be able to help me.
I've been using typepad and one of the pages has FAQs and uses javascript so that if you click on a question the answer is revealed. Then if you click on the answer text it disappears again. I updated some of the answer text and it seems to have broken the javascript links somehow. I've been doing tutorials and trying to learn how to fix it. It now just shows the questions and answers and the click to reveal functionality has been lost.
Our designer was using onclick = toggle
I have included the code (replacing the answer text with Answer 1 for brevity) here to see if anyone can point out how it has been broken/how I can fix it. Sadly I have zero experience of doing this. Thank you so much :)
<p>FAQ Display</p>
<script type="text/javascript">// <![CDATA[
function toggle(Info) {
var CState = document.getElementById(Info);
CState.style.display = (CState.style.display != 'block')
? 'block' : 'none';}
// ]]></script>
<div><strong>Click on the question to reveal the answer!</strong><br /><br /></div>
<h3>Services</h3>
<div class="FAQ" onclick="toggle('faq17')"><strong>Why use this service? </strong>
<div id="faq17" class="FAA">Answer 17.</div>
</div>
<div class="FAQ" onclick="toggle('faq1')"><strong>How much does the cleaning and labelling service cost?</strong>
<div id="faq1" class="FAA">Answer 1.</div>
</div>
<div class="FAQ" onclick="toggle('faq2')"><strong>How do I book the service? </strong>
<div id="faq2" class="FAA">Answer 2.</div>
</div>
<div class="FAQ" onclick="toggle('faq3')"><strong>How long does the service take?</strong>
<div id="faq3" class="FAA">Answer 3.</div>
</div>
<div class="FAQ" onclick="toggle('faq4')"><strong>Is there a minimum number of residents required to visit my facility?</strong>
<div id="faq4" class="FAA">Answer 4.</div>
</div>
<h3>DIY Kits</h3>
<div class="FAQ" onclick="toggle('faq5')"><strong>Where can I purchase a kit from?</strong>
<div id="faq5" class="FAA">Answer 5.</div>
</div>
<div class="FAQ" onclick="toggle('faq6')"><strong>How much does a DIY kit cost?</strong>
<div id="faq6" class="FAA">Answer 6.</div>
</div>
<div class="FAQ" onclick="toggle('faq7')"><strong>How long will my kit last? </strong>
<div id="faq7" class="FAA">Answer 7.</div>
</div>
<div class="FAQ" onclick="toggle('faq8')"><strong>Do the kits expire?</strong>
<div id="faq8" class="FAA">Answer 8.</div>
</div>
<div class="FAQ" onclick="toggle('faq9')"><strong>Is there a material data safety sheet (SDS) for the kits?</strong>
<div id="faq9" class="FAA">Answer 9. <span class="asset asset-generic at-xid-6a01b7c6f66688970b01bb088843a0970d img-responsive">Download SDS iDentOz Denture Marking Sealant Version 1.0 </span></div>
</div>
<h3>Generic Questions</h3>
<div class="FAQ" onclick="toggle('faq10')"><strong>Where is the label placed on the denture?</strong>
<div id="faq10" class="FAA">Answer 10.</div>
</div>
<div class="FAQ" onclick="toggle('faq11')"><strong>Do you service all areas? </strong>
<div id="faq11" class="FAA">Answer 11.</div>
</div>
<div class="FAQ" onclick="toggle('faq12')"><strong>How do I make payment? </strong>
<div id="faq12" class="FAA">Answer 12.</div>
</div>
<div class="FAQ" onclick="toggle('faq13')"><strong>Are our staff police checked?</strong>
<div id="faq13" class="FAA">Answer 13.</div>
</div>
<div class="FAQ" onclick="toggle('faq14')"><strong>Is your work guaranteed?</strong>
<div id="faq14" class="FAA">Answer 14.</div>
</div>
<div class="FAQ" onclick="toggle('faq15')"><strong>Do you repair dentures? </strong>
<div id="faq15" class="FAA">Answer 15.</div>
</div>
<div class="FAQ" onclick="toggle('faq16')"><strong>Do you have insurance? </strong>
<div id="faq16" class="FAA">Answer 16.</div>
</div>
<p><hr class="at-page-break" /></p>
Not to shore what you want but this might work for you:
<html><head>
<script type="Text/JavaScript"> function displayanswer(){
document.getElementById('question').innerHTML = ' //Put answer here'}
</script>
</head><body>
<h1>Press on the question for answer</h1>
<button onclick="displayanswer"><h2 id="question"> //put your question here </h2></button>
</body></html>
I am not sure if another portion of your code is causing this to break.
I broke this out into a jsfiddle here: Fiddle
.FAA {
display:none;
}
I just added the style to initially have it hidden. You can toggle with it and let me know if there is additional problems you may be having
To include this on your page you can simply add this line right before the tag
<head>
<!--May have other code here -->
<style>
.FAA { display:none; }
</style>
</head>
This may be the simplest way in doing it
Related
In my code for cmd and normal its working, but for #aboutme its not. Don't know why such event is getting ignored while its working for the above snippet.
var normal = $(".normal");
var cmd = $(".cmd");
normal.on("click", function(){
$(".UI").show();
$(".console").hide();
});
cmd.on("click", function(){
$(".console").show();
$(".UI").hide();
});
$("#aboutme").on("click",function(){
console.log("okay");
});
My Html Code: class dashboard acts as a wrapper.
<div class="dashboard ">
<div class="option">
<div class="normal">Normal</div>
<div class="cmd">Terminal</div>
</div>
<hr style="background-color: white;">
<div class="console">
</div>
<div class="UI ">
<div class="showcase">
<div id="aboutme">
<h2><span>»About</span></h2>
<p>Self-motivated fresher seeking a career in recognized organization to prove my skills and utilize my knowledge and intelligence in the growth of organization.</p>
</div>
<div id="Skills">
<h2><span>Skills</span></h2>
<p> <kbd>Programming Languages</kbd> : Python, Node.js, C++</p>
<p> <kbd>Platform & Development Tools</kbd> : VS Code , Spyder and Jupiter Notebook</p>
</div>
</div>
</div>
Seems to work, can you provide your full HTML
$("#aboutme").on("click",function(){
console.log("okay");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="aboutme">Test</button>
I would like to use JavaScript to find the first link in a div (the learn more link) and wrap the entire div with that href dynamically.
How can I revise this code so it does this?
$('div.textPane .DNNModuleContent.ModDNNHTMLC').wrap("<a href=''></a>", function() {
a.href = $('a:first', this).attr('href');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dnn_pane02textLeft" class="flexPane LeftPane textPane">
<div class="DnnModule DnnModule-DNN_HTML DnnModule-499 DnnVersionableControl">
<a name="499"></a>
<div id="dnn_ctr499_ContentPane" style="background-color:#f2a42a;">
<div id="dnn_ctr499_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
<div id="dnn_ctr499_HtmlModule_lblContent">
<h1>Analytic Solutions</h1>
<p>Wilshire serves the investment analytic needs of institutional investors by offering a platform that combines the depth of our capabilities within...
</p>
<h5>Learn More</h5>
</div>
</div>
</div>
</div>
</div>
Clone the element and remove the text content then wrap by it
$('div.textPane .DNNModuleContent.ModDNNHTMLC').wrap(function() {
return $('a:first', this).clone().text('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dnn_pane02textLeft" class="flexPane LeftPane textPane">
<div class="DnnModule DnnModule-DNN_HTML DnnModule-499 DnnVersionableControl">
<a name="499"></a>
<div id="dnn_ctr499_ContentPane" style="background-color:#f2a42a;">
<div id="dnn_ctr499_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
<div id="dnn_ctr499_HtmlModule_lblContent">
<h1>Analytic Solutions</h1>
<p>Wilshire serves the investment analytic needs of institutional investors by offering a platform that combines the depth of our capabilities within...
</p>
<h5>Learn More</h5>
</div>
</div>
</div>
</div>
</div>
Or by creating new a tag
$('div.textPane .DNNModuleContent.ModDNNHTMLC').wrap(function() {
return $("<a/>", {
href: $('a:first', this).attr('href')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dnn_pane02textLeft" class="flexPane LeftPane textPane">
<div class="DnnModule DnnModule-DNN_HTML DnnModule-499 DnnVersionableControl">
<a name="499"></a>
<div id="dnn_ctr499_ContentPane" style="background-color:#f2a42a;">
<div id="dnn_ctr499_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
<div id="dnn_ctr499_HtmlModule_lblContent">
<h1>Analytic Solutions</h1>
<p>Wilshire serves the investment analytic needs of institutional investors by offering a platform that combines the depth of our capabilities within...
</p>
<h5>Learn More</h5>
</div>
</div>
</div>
</div>
</div>
I have a pagination set up that I have used many time before... works great for lists and simple paragraphs, but I am unable to get it to work with a more complex html code, which is listed below. For some reason, the js refuses to turn the below code into a set object in order to paginate.
<div class="properties-content">
<div id="paging_container8" class="container">
<div class="storybody">
<p>
<!---------- Property Start ---------->
<article class="hentry">
<div class="property-featured"> <a class="content-thumb" href="property-details.html"> <img src="images/property/property3.jpg" alt=""> </a> <span class="property-label last">Last one left</span> <span class="property-category">Single Family Home </span> </div>
<div class="property-wrap">
<h2 class="property-title"> Single Family Residential, NJ </h2>
<div class="property-excerpt">
<p>Classic 60's ranch living. House has hardwood floors and hard coat plaster walls and ceilings...</p>
<p class="property-fullwidth-excerpt">Classic 60's ranch living. House has hardwood floors and hard coat plaster walls and ceilings in good condition. Intimate backyard for private gatherings. Full basement...</p>
</div>
<div class="property-summary">
<div class="property-detail">
<div class="size"> <span>1118 sqft</span> </div>
<div class="bathrooms"> <span>2</span> </div>
<div class="bedrooms"> <span>3</span> </div>
</div>
<div class="property-info">
<div class="property-price"> <span> <span class="amount">$299,000</span> </span> </div>
<div class="property-action"> More Details </div>
</div>
<div class="property-info property-fullwidth-info">
<div class="property-price"> <span><span class="amount">$299,000</span> </span> </div>
<div class="size"><span>1118 sqft</span> </div>
<div class="bathrooms"><span>2</span> </div>
<div class="bedrooms"><span>3</span> </div>
</div>
</div>
</div>
<div class="property-action property-fullwidth-action"> More Details </div>
</article>
<!---------- Property End ---------->
<!---------- Property End ---------->
</p>
<div class="page_navigation"></div>
I need, due to how my css is, to show 2 of the above code snippet out of maybe 25. And here is my javascript that I am using:
<script>
var str= $(".storybody").html();
var substr=str.split( "<!--pagebreak-->" );
var txt="<ul class='storycontent'><li>";
var x=0;
for (x in substr)
{
if(x==0){
txt=txt+substr[x];
}
else{
txt=txt+"</li><li>"+substr[x];
}
}
var paginated=txt+"</li></ul>";
$('div.storybody').replaceWith(paginated);
$(document).ready(function(){
$('#paging_container8').pajinate({
num_page_links_to_display : 2,
items_per_page : 1 ,
item_container_id : '.storycontent'
});
});
</script>
And here is the jsfiddle: http://jsfiddle.net/moLwmyyr/1/
I have figured it out!
The following js, along with the js in the fiddle, work with my html code in my question. Instead of the original js which only worked for simple lists, tables, and paragraphs, the js listed here will work on nested html code.
(function($){
$(document).ready(function(){
$(".pagination").customPaginate({
itemsToPaginate : ".post"
});
});
})(jQuery)
http://jsfiddle.net/moLwmyyr/2/
Works perfectly with my site and css. Hope this helps others.
I have the fiddle all ready to go I just need help with the jquery/javascript part. What I want is to have the record name/station title change when the user clicks on the play button they find on hovering over the album cover. I also want the record/vinyl in the "player" box to start spinning. Right now it spins on hover but I want to change that.
Here is the fiddle http://jsfiddle.net/7txt3/1/
and here is just the html code because the css is kinda long!
<div class="grid_12">
<div class="grid_6 alpha"><!-- record, overflow:hidden -->
<div id="player">
<div id="recordbox">
<div class="record2">
</div>
</div>
<div class="bars-box">
<div class="player-box">
<div id="title-player">Now playing:</div><br><strong><span class="player-station">Groove Salad</span></strong>
<div class="bars">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
<div class="bar-4"></div>
<div class="bar-5"></div>
<div class="bar-6"></div>
<div class="bar-7"></div>
<div class="bar-8"></div>
<div class="bar-9"></div>
<div class="bar-10"></div>
</div>
</div>
</div>
</div>
<div class="grid_3">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">A nicely chilled plate of ambient/downtempo beats and grooves.</p>
<a class="play" href="#">Play</a>
</div>
<div class="salad"><!-- sleeve -->
<h3>Groove Salad</h3>
</div>
</div>
</div>
<div class="grid_3 omega">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">Sensuous and mellow vocals, mostly female, with an electronic influence.</p>
<a class="play" href="#">Play</a>
</div>
<div class="lush"><!-- sleeve -->
<h3>Lush</h3>
</div>
</div>
</div>
Something like this?
$(function(){
var station = $('.player-station');
$('.play').click(function(){
station.text($(this).closest('.album').find('h3').text());
});
});
Demo: http://jsfiddle.net/7txt3/3/
For spinning you can use: http://code.google.com/p/jqueryrotate/
So, first thing is first... you need to read up on the use of an ID versus the use of a Class. To put it a bit simply:
ID = Unique identifier for an element
Class = Identifier for a series of elements
The reason I bring this up is because you have odd naming conventions like class="lush" which don't make sense. That should be an id, and the class should be something like "sleeve".
Anyway, here's the updated code and fiddle. Yes, you can make it a bit more condensed (not set a var for the title), but I wanted to spread it out so you could see the code a little better. If you have questions, let me know.
$('a.play').click(function() {
var title = $(this).closest('.album').find('.album-title');
$('span.player-station').text($(title).text());
});
I also added a class to the h3 tags, just so you didn't run into any issues down the road:
<h3 class="album-title">Lush</h3>
Here's the fiddle:
http://jsfiddle.net/7txt3/4/
I have this HTML code:
<div id="content">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="container" id="status-#">
<div class="message">
<span class="username">{username} Debugr Rocks!
</div>
<div class="info">24-oct-2010, 14:05 GMT · Comment (5) · Flag · Via Twitter
</div>
<div class="comment_container">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=32&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="comment_message">
<span class="username">{username}</span> Debugr Rocks! XD
</div>
<div class="comment_info">24-oct-2010</div>
</div>
</div>
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
That is repeated two or more times. What I want to do, is to when I click the "Comments (5)" link, the class "comment_container" appears, but only the one in the same "container" class.
It's this possible?
You can use .closest() to go up to the .container then .find() to look inside it, like this:
$(".toggle_comment").click(function() {
$(this).closest(".container").find(".comment_container").show();
});
You can try it here, if you're curious about finding other things relative to this here's a full list of the Tree Traversal functions.
As an aside, there's an error in your HTML that needs correcting, this:
<span class="username">{username} Debugr Rocks! </div>
Should be:
<span class="username">{username} Debugr Rocks! </span>