I have 4 links, and 4 content boxes which the first content box is visible and the other 3 are hidden. I believe I need to use javascript to toggle these content boxes. When I click the second link it should show the second content box and hide the first one. if it was possible to fade in and out that would be awesome. Please help I have been searching for a tutorial doing exactly this and I just cant put it together
According to your current structure, I changed the HTML code and come up with this jQuery:
$("a").click(function(){
$("div").fadeOut("slow")
$("#"+$(this).text()).fadeIn("slow");
});
Check out this Fiddle..
Related
I have been reading many posts about toggling an icon and I got some code to work but it only works for one item and I have 23 of them.
Basically, it's an accordion of FAQ's and when you click on it the answer shows but I want a plus and minus sign to show and toggle depending on if it's collapsed or not.
I found this code and updated with my site and it works but only for the first FAQ.
$("#switch").click(function(event) {
$(this).find('i').toggleClass('fa-plus-square').toggleClass('fa-minus-square');
});
What do I need to do to make it so they all change?
I thank you in advance for your time.
Only one item on the page can have the id switch. Change this to a class and select using $('.switch') to apply the event to each item.
I made an onclick popup redmore button for my sidebar text widget in wordpress just copied and pasted this code I found here. I did some little changes and everything worked fine.
The problem occurred when I had to make more onclick popups like that one for the rest of the sidebar widgets, exactly the same popup with same values but with different img and content text.
The problem is both "redmore" buttons in the first widget and in the second one link to the same thing - so it will open the same one no matter which redmore button you click -
this is the website check out the first two items in the right sidebar.
Since I don't know much about Javascript, I'm asking you if you can help me changing the javascript tag link in the code in order to link to another different popup and not the same one - and let me understand how to change it since I have to make a few popups.
You should change the Id attribute of the Contents for eg
<div id="light2" class="white_content">
<div id="fade2" class="black_overlay">
for the second pop up and change the javascript of the second read more text to
here
Same should be applied to all other pop ups.
Here i have changed the fiddle
You need to change the id for every popup Like
getElementById('fade')
getElementById('light')
[the first]
getElementById('fadesec')
getElementById('lightsec')
[the second]
And so on.. same thing on html content, don't just copy, change ids
Example two:
<p>This is the main content. To display a lightbox click here</p>
<div id="lightsec" class="white_content">This is the lightbox content. Close</div>
<div id="fadesec" class="black_overlay"></div>
Everytime I click a div or I focus on a contenteditable div it highlights the text I've clicked. This is not the case for other sites I have tried so I know it's not my mouse, I have a fair amount of jquery and css so I don't think it's useful to post all the code. Could people provide suggestions/speculation to why it's doing this and how it could be fixed because at the moment I have no idea.. I have no specific code to highlight any text so I'm very confused.
Relevant Code:
//This is loaded on body load
$("body").click(function(el) {
if($("#menu").is(":visible")){
//The click handler function puts new textboxes in if clicked correctly.
clickHandler($(event.target));
}
<div class="container image">
<img src="https://placeimg.com/240/180/any" />
</div>
You can try
window.getSelection().removeAllRanges();
document.getSelection().removeAllRanges();
To make sure all your text is not selected.
Please take a look at these two entries:
How can I deselect text using Javascript or jQuery?
Select/Unselect Text on click Using jQuery
So I think this is actually a bug in chrome. After leaving it a few hours and then refreshing the page, it randomly started working with normal functionality. Thank you to everyone who attempted to help - guergana presents a possible solution if you have stumbled across this page looking for answers.
I have a bunch of HTML fields logically separated as such: half the fields reside in: div id="general" and the other half reside in: div id="advanced"
What I'm trying to implement (and failing) is the following:
The fields in the general div to be shown (by default). A button with the caption "Advanced" shown. And the fields in the advanced div to be hidden.
When this button is clicked, the following should occur:
General section collapses hiding all it's fields
Advanced section expands showing all it's fields
Button caption is changed to "General".
Subsequent clicks toggles the above.
E.g. upon the next click, the advanced section now is hidden, general section now is shown, and button caption changes to "Advanced"
Notes: This seems trivial but being new to web front-end, I can't get this easily. If my div section is incorrect, then scrap it. I suspect I'm on the right track, and just need some jQuery code to collapse and expand divs.
Below are my attempts:
I used the Bootstrap collapse plugin with accordian markup, but this isn't what I want. It comes close though, but each section has a heading/button. I'd like one heading/button to toggle each section in an opposite manner.
I used the Bootstrap collapse plugin without the accordian markup, but same result as attempt 1 - two button again.
I tried using jQuery to do this dynamically, but can't get the logic (or syntax) correct.
I'm using Bootstrap, but happy to go with jQuery (or JavaScript) solution if it can't be done solely in Bootstrap with the collapse plugin.
You can do it using jquery by toggling a class on element which decides which fields to be shown.
for e.g. Take an outer div, and put general and advanced div inside outer div and show only the fields based on outer div class like advanced using css. And bind a button to toggle the class on the outer div.
Checkout JSFiddle here : http://jsfiddle.net/eqhw2mxx/2/
Check the JSFiddle :- JSFiddle
$("#advanced").addClass('hide');
$(".button").click(function(){
$("#advanced").toggleClass('hide');
$("#general").toggleClass('hide');
if($(this).attr("value") == "Advanced"){
$(this).attr("value","General");
}
else if($(this).attr("value") == "General"){
$(this).attr("value","Advanced");
}
});
I am working on a system where a user can add notes over an image that they submit. Currently I have a note div that when clicked, will open up a text box to edit it. When hovering over this div, I use Bootstrap Tooltip to preview the information within the textbox.
I also have a list of the notes within a separate right panel. Is is possible to hover over the listed note in the right panel, and show the tooltip on the note div? In general, my question is: Is it possible to activate a tooltip from a separate div?
Here is the primary div that when hovered, shows a tooltip
<div originalh="85" originalw="122" originaly="501" originalx="490" h="23.071428571428" w="33.114285714286" y="135.98571428571" x="133" noteid="1153" note="TEST" class="noteBox helpTip" onclick="process.editNote(this)" id="note1153" data-original-title="TEST<br></div><small>Type: Color Correction</small><br/><small>Status: Awaiting Approval</small><br /><small>By: Josh Admin<br />Today 10:54 AM</small>"></div>
Is is possible for me to apply some code to a separate div that would allow me to hover over it, and trigger the tooltip on #note1153 above?
Yes, you can trigger the tooltip on any element via JavaScript. See the tooltip documentation for more information.
You would just do:
$('#whatever').tooltip('show');
Here's an example of it in action: http://jsfiddle.net/sJ88m/