I'm trying to include what should be a simple JQuery snippet into a friend's portfolio website to replace:
<div class="content one">
<h3>Content Title</h3>
<p>Body text.</p>
</div>
With:
<div class="content two">
<h3>Content Title</h3>
<p>Body text.</p>
</div>
When hovering on a separate div class of:
<div class="item two"><!--content two icon-->
<img src="" alt="" />
</div>
I have these separate classes of <div class="item"> that have icons in them. I want to be able to hover over the icon's class and replace the <div class="content"> class with another one that corresponds to the <div class="item"> icon.
For the JQ, I'm using the following:
<script type="text/javascript">
$('.item two').hover(function(){
$('.content one').replaceWith($('.content two'));
});
</script>
I have each content class (except .content one) as display: none; I think I need to throw in a .show(); event inside of the replaceWith(); function, but even if I remove display: none; on the classes, nothing replaces itself with the class I'm trying to replace.
I'm still relatively new to JQuery and JavaScript as a whole, so it's probably something stupid simple that I'm not doing right. Forgive me if I didn't include enough information to help you figure out the issue. Thanks for the help!
You have two classes on the same element in both cases, so your selectors should be:
.item.one
.item.two
.content.two
.content.two
try this:
$('.item.two').hover(function(){
$('.content.one').replaceWith($('.content.two'));
});
Related
I am facing a problem with the Jquery toggle option. I copy-pasted the code of the first toggle block to use as a template for the next ones and it worked perfectly on the first page. I personalised 8 blocks that open and close when clicked.
But when I copy-pasted some of those to put them on another page, they are all open by default. The same exact code gives a different outcome.
As suggested in other posts I tried changing the class and ID names, and over write with 'ready-hide' but it still won't make the toggle 'closed' by default.
How could I have the toggable blocks closed when the page opens?
I'm sorry for the gibberish, this is my first try at coding and I could really use a little help!
Thank you
Example of my code that works on one page but not the next one:
<div id="flip1" class="flip">
<span style="cursor:pointer">
<img src="img1"/><b>Title1</b>
</span>
</div>
<div id="panel1" class="panel">
<div class="type1">
<article id="article1">
<h2>Title first article</h2><img src="img"/>bla bla bla</article>
</div>
</div>
<script>
$(document).ready(function(){
$("#panel1").hide();
$("#flip1").click(function(){
$("#panel1").slideToggle("slow");
});
});
</script>
<div id="flip2" class="flip">
<span style="cursor:pointer">
<img src="img2"/><b>title2</b>
</span>
</div>
<div id="panel2" class="panel">
<div class="type2">
<article id="article2">
<h2>Title second article</h2><img src="img"/>Bla Bla bla Bla</article>
</div>
</div>
<script>
$(document).ready(function(){
$("#panel2").hide();
$("#flip2").click(function(){
$("#panel2").slideToggle("slow");
});
});
</script>
Thanks again!
I've been working on this for a while and thought I'd like to get some expert advice.
I have 4 divs on a page labelled sun-sun3. When each of the divs is clicked a corresponding div (suninfo-suninfo3) will appear and when clicked again will disappear. While one of the info divs is open the others will always be closed.
Here is the html
<div class="dot sun">
</div>
<div class="info suninfo">Some Content</div>
<div class="dot sun1">
</div>
<div class="info suninfo1">Some Content</div>
<div class="dot sun2">
</div>
<div class="info suninfo2">Some Content</div>
<div class="dot sun3">
</div>
<div class="info suninfo3">Some Content</div>
The CSS is styled so that the sun divs use pulse which works fine and the suninfo divs appear in various locations around the page. All works perfectly.
The following Javascript also works fine, however it is using toggle() which I would like to replace. My code is also quite long.
$(document).ready(function(){
$(".sun").click(function(){
$(".suninfo").toggle();
$(".suninfo1,.suninfo2,.suninfo3").hide();
});
$(".sun1").click(function(){
$(".suninfo1").toggle();
$(".suninfo,.suninfo2,.suninfo3").hide();
});
$(".sun2").click(function(){
$(".suninfo2").toggle();
$(".suninfo,.suninfo1,.suninfo3").hide();
});
$(".sun3").click(function(){
$(".suninfo3").toggle();
$(".suninfo,.suninfo1,.suninfo2").hide();
});
});
As you can see, there isn't much to it and it does work, but I'd rather not use toggle()
Cheers
I would suggest leveraging jQueryUI for this -- as it provides this functionality out of the box.
http://jqueryui.com/accordion/
In addition it will not require you to modify your script if you decide to later add divs for sun4, sun5, and/or sun6, etc.
You can use start with jquery selector in this case but need to rename 'suninfo' class name because 'sun' and 'suninfo' class names starts with 'sun' word, so it will be difficult to use start with jquery selector. Also selector class name should be first while writing in div
like if we are using $("[class^='suninfo']") then suninfo should be first call in <div class="suninfo info">.
Please see below jquery
$(document).ready(function(){
$("[class^='sun']").click(function(){
var nextElement = $(this).next();
$(nextElement).toggle();
$("[class^='infoSun']").not($(nextElement)).hide();
});
here rename your suninfo class to infoSun and call it at first place like below
<div class="dot sun">
</div>
<div class="infoSun info">Some Content</div>
<div class="dot sun1">
</div>
<div class="infoSun1 info">Some Content</div>
<div class="dot sun2">
</div>
<div class="infoSun2 info">Some Content</div>
<div class="dot sun3">
</div>
<div class="infoSun3 info">Some Content</div>
Please see this for more information on start with selector in JQuery
To make it more simple according to you structure:
$(".dot").each(function(){
$(this).click(function(){
$(this).next().toggle();
$(".info").not($(this.next())).hide();
})
})
Why don`t you like toggle?
To manually control it you can:
$(element).hide('slide',{direction:'left'},1500) //([animation, params, time])
$(element).show('slide')
if using jQuery
How do I move the contents of a div to the contents of another div?
I want to move .sidebar from .post to .carousel. How to do it by using javascript?
I want to go from this:
<div class="container">
<div class="carousel">
<div class="row">
<div class="post">
<div class="sidebar"></div>
</div>
</div>
</div>
</div>
to this:
<div class="container">
<div class="carousel">
<div class="row">
<div class="post"></div>
<div class="sidebar"></div>
</div>
</div>
</div>
document.getElementsByClassName('row')[0].appendChild(document.getElementsByClassName('sidebar')[0]);
I'd suggest, on the off-chance you've more than one element with that class (and assuming that in all instances they should be inserted after their parentNode):
$('.sidebar').each(function(){
$(this).insertAfter(this.parentNode);
});
JS Fiddle demo.
References:
each().
insertAfter().
Assuming you only have only one such occurrence, you can use plain JavaScript:
var sidebar = document.getElementsByClassName('sidebar')[0];
// move after parent node
sidebar.parentNode.parentNode.appendChild(sidebar);
The appendChild() function moves rather than copies existing elements from their previous location in the tree. To perform a copy you would need to clone the respective elements first.
Try to use JQuery Draggable() and Droppable() functions.
See the Demo...
Droppable | JQuery UI
I'm using jQuery to show and hide areas on my site with just a toggle. Which works fine, but if i have multiple elements I want to show and hide individually on the page I have to write a bit of jQuery for each item. Is there a way to do it for a class or ID within the encapsulating class?
heres my jQuery:
jQuery('.collapse').click(function() {
jQuery('#filterArea').toggle('slow', function() {
});
});
And heres my content:
<div class="tabs">
<div class="ui-widget-header">
<div class="collapse" id="boxId">Content Box</div>
</div><br />
<div class="addPadLeftNoFloat" id="filterArea">
<p>Content for box</p>
</div>
</div>
I want to be able to have a few areas on the page with the class of collapse that just close the filterArea within the outer collapse? Or similar? I'm not doing a great job of explaining this! - So if i have two divs with the class of collapse, when i click them the filterarea of that div collapses
Tom
Instead of having filterArea as an id, change it to a class.
<div class="tabs">
<div class="ui-widget-header">
<div class="collapse" id="boxId">Content Box</div>
</div>
<br />
<div class="addPadLeftNoFloat filterArea">
<p>Content for box</p>
</div>
</div>
Also change your JavaScript to this:
jQuery('.collapse').click(function() {
jQuery('.filterArea').toggle('slow', function() {
});
});
A working example.
Edit: if you only want to collapse .filterArea elements with the enclosing .tab element, use JavaScript something like this:
$('.collapse').click(function() {
$(this).closest('.tabs').find('.filterArea').toggle('slow');
});
Updated example.
Can someone please explain the structure of this line of a script for me? Another user on here has written it as part of a function that I know want to edit and change to use elsewhere on my site.
$('#main_content .img-wrapper').empty().append($(this).find('img').clone());
This one takes an image from one div and copies it to another with the class="img-wrapper"
I want to do exactly the same but with text. I tried this
$('#main_content .text-wrapper').empty().append($(this).find('.info').clone());
where ('.info') is the class name of the div I want to copy. Its not working.
I don't fully understand the syntax as this is my first day using javascript. Please can someone explain where I'm going wrong?
This is the HTML - There are four different images and when the user clicks on each of the image I want it to load the same image and associated text in the main content div
<div class="row">
<div class="card-container">
<div class="card">
<div class="back">
<img src="images1.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#cc99cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images2.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#9966cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images3.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#6666cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images4.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#3366cc;"></div>
</div>
</div>
This is the main content div
<div id="main_content">
<!-- main content -->
<div class="img-wrapper">
</div>
<div class="text-wrapper">
</div>
</div>
The javascript in question is using jQuery.
$('#main_content .img-wrapper')
returns the element(s) with class 'img-wrapper' inside the element with id 'main_content'
.empty()
empties this element (removes all it's HTML contents)
.append(
inserts the argument (the bit that comes next) into this element
$(this).find('img')
finds all 'img' tags within the element referred to by this (i.e. if this was triggered from a .click() handler then the element that was clicked)
.clone()
clones these elements so that there are two versions - one in their original location and one being inserted into the #main_content img-wrapper element.
);
Do you definitely have a #main_content .text-wrapper element?
Without seeing the html structure, my guess would be the context in which you're trying to find .info is incorrect.
I'm assuming this block of code is within an event handler like a click or mouseover or something. In that case the $(this) is referring to the element that triggered that event. So the following snippet:
$(this).find('.info')
is looking for elements with a classname of info within the element referred to by $(this).
Make sure the context is correct - change $(this) to the element that you need to search within.
Try this:
$('#main_content .text-wrapper').empty().append($(this).find('.info').html());