I have been messing with creating a site (with shopify) and want to create a box-shadow under two elemtens which occur more than one time on the site. Creating a wrapper div is not working.
I tried working with wrap and wrapAll but my results are, that wrap is wrapping the 2 divs but displaying a dropshadow underneath each element, while WrapAll wraps all elemtns and positions them in one giant div.
I am new to css and js but my guess is to
loop over the parent divs
get the 2 child divs
wrap them via wrapall
but i dont know how.
<div class="grid-view-item product-card">
<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">Testproduct</div>
<dl class="price price--listing">...</dl>
</div>
$('.product-card__title,.price--listing').wrap('<div class="child"></div>');
(js code wraps all into a single big div)
Thank you for any answers.
You can replace the code
like this:
<div class="grid-view-item product-card">
<div class="inner">
<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">Testproduct</div>
<dl class="price price--listing">...</dl>
</div>
</div>
$('.inner').wrap('<div class="product-card-inner"></div>');
and for box shadow you can give shadow to .product-card
Related
I know this is a simple thing to do but can't get my head around what I'm doing wrong. I have a h2 tag which will run a function on click, this will then locate a div with the class 'homeSlide' and then run the slideToggle method. However I can't seem to get the content to slide without making the two divs below with the same class name also slide.
Here is my HTML:
<h2>Header</h2>
<div id="home_newproducts_list">
<div class="category-products">
<ul class="products-grid">
<li>Hold fetured products so will be excluded from the slideToggle</li>
</ul>
<div class="homeSlide">
<!-- Content that needs to be displayed on slide -->
</div>
</div>
</div>
Jquery:
jQuery(document).ready(function(){
jQuery("#home_newproducts_list ul.products-grid").not(":first").wrapAll('<div class="homeSlide">');
jQuery(".home-spot h2").click(function(){
jQuery(this).next('.homeSlide').slideToggle(1000);
});
});
I hope i've explained it in enough detial.
So all I want to be able to do is run the slideToggle method on the homeSlide div, but only on the next one after the h2.
jQuery(".home-spot h2")
assuming you are selecting the <h2>Header</h2> element here
try with next() and find().
jQuery(this).next().find('.homeSlide').slideToggle(1000);
next() gets the immediately following sibling which is div#home_newproducts_list in your case
I have some images that are wrapped within containers like this:
<div id="swatchcontainer">
<div class="swatchimgouter">
<div class="swatchimginner">
<img src="whatever1.jpg" alt="some text" title="some text too"/>
</div>
</div>
<div class="swatchimgouter">
<div class="swatchimginner swatchdisabled">
<img src="whatever2.jpg" alt="some text" title="some text too"/>
</div>
</div>
<div class="swatchimgouter">
<div class="swatchimginner">
<img src="whatever3.jpg" alt="some text" title="some text too"/>
</div>
</div>
etc., etc.
</div>
It's not mission critical, but I got to thinking that it's probably possible to sort these images fairly easy using JQuery. I would like to place all images that are wrapped in the "swatchdisabled" class at the end.
There could be a couple of dozen of these images. They're all styled with float:left and so they display horizontally in rows. Even if there are a couple of dozen, there are only 2 rows. Each of these images is 30 pixels by 30 pixels.
It's just a UI consideration. Makes it a lot easier to keep track of which items are disabled and which are enabled by placing all disabled images at the end.
If it's fairly simple to do this, I'll also need to keep their inner div classes with them.
Try like this:
$('.swatchdisabled').each(function(){
$(this).parent().parent().append( $(this).parent() );
});
this will move all .swatchimgouter divs,which have .swatchdisabled class on .swatchimginner div, to the end of their parent.
Demo is here.
$('.swatchdisabled').each(function() {
$(this).closest('.swatchimgouter').appendTo($('#parentdiv'));
});
or
$('.swatchdisabled').each(function() {
$(this).parent().appendTo($('#parentdiv'));
});
where #parentid is the common parent of all your wrapping div
A version that does not rely on the container div that you mention in the comments, it will just work with the given divs in your question:
$(".swatchimgouter").last().after("<div id='wall'></div>")
$(".swatchdisabled").each(function(){
$("#wall").after($(this).parent());
});
$("#wall").remove();
You could squeeze more juice out but you get the idea.
let's say I have an HTML structure like this:
<div class="first">
<div class="sub-1">
<div class="first again"></div>
</div>
</div>
How do I select only the div that has the class "first" but which is NOT inside the div that has the class "sub-1". In order words, how do I get only the outer div but extract any div inside that outter div that have the same class than the outter div (I want to get just the div with class="first", not the one with class="first again").
Thank you
See jQuery documentation for .not(). This should work:
$('.first').not('.sub-1 .first');
I dont know if you mean a very generic way to handle this but in this particular case you can only write.
$(".first:first")
A more generic way would be
$('.first').not('.sub-1 .first').prepend("I was first");
http://jsfiddle.net/JYLVc/
I have a page with two divs in it, one inside the other like so:
<div id='one'>
<div id='two'></div>
</div>
I want div one to change class when it is clicked on, then change back when div two is selected.
I'm completely new to javascript, but I've managed to find a simple command that makes div one change when I click it.
<div id='one' class='a' onclick="this.className='b';">
<div id='two'></div>
</div>
Now I just need an equally simple way to change div one back when number two is clicked.
I've tried changing "this.className" to "one.classname," and for some reason that worked when I was working with images, but it doesn't work at all with divs
<div id='one' class='a' onclick="this.className='b';">
<div id='two' onclick="one.className='a';">
This does not work.
</div>
</div>
Essentially I'm wondering if there is a substitute for the javascript "this" that I can use to target other elements.
I've found several scripts that will perform the action I'm looking for, but I don't want to have to use a huge, long, complicated script if there is another simple one like the first I found.
You can use document.getElementById
<div id='two' onclick="document.getElementById('one').className='a'; return false;">
This does not work.
</div>
This would work:
document.getElementById('one').className = 'a';
you could get the element by id with:
document.getElementById("one")
I've got a website set up with well structured pages, eg. <h1> for the website name, <h2> for the page name and <h3> for the different sections on the page.
Anyway, I was looking to set a bunch of the really long pages (an FAQ page for example) up with an "accordion" effect, with the <h3> elements being the toggle and the content directly following being toggled. But the collapsible content needs to be in it's own <div class="draw"> (or similar) and this isn't how the content is set up currently. I was hoping this was possible without touching the existing HTML and just somehow changing the DOM with JS (with jQuery assistance?) to accommodate.
I thought maybe wrapping content between the <h3> elements in a classed <div> might work but wouldn't know how to get this done. Help?
Here's one way to do it that doesn't rely on traversable DOM elements between the h3 tags. I'm not sure how efficient it is to swap out the entire contents of the body tag like this on every load though...
$(document).ready(function(){
var content = $('body').html();
content = content.replace(/(<\/h3>)((.|\n|\r)*?)(<h\d>|$)/gi, "$1<div class=\"draw\">$2</div>$4");
$('body').html(content);
});
I tested this out on content formatted like so:
<body>
<h1>Title</h1>
<h2>Sub-Title</h2>
<h3>Section Title</h3>
this is some content
<h1>Title</h1>
<h2>Sub-Title</h2>
<h3>Section Title</h3>
this is some content
...
</body>
The jQuery documentation on the accordion widget is very easy to use. http://docs.jquery.com/UI/Accordion. But using the jQuery method only works if you have the structure they describe in the docs. In other words (as far as I know) it is impossible to use the jQuery accordion widget without touching your HTML. This is the structure:
<div id="accordion">
<h3>Tab 1</h3>
<div>
First tab content
</div>
<h3>Tab 2</h3>
<div>
Tab two content
</div>
<h3>Tab 3</h3>
<div>
Tab three content
</div>
</div>
Then you would create the widget using the line of javascript:
$("#accordion").accordion();
If you wanted to use jQuery to format your HTML for you, you still need a way to select and parse your HTML. Each tab's content needs to be selectable some how. If your HTML already has the tabs separated somehow, then you need to take a look at this page http://docs.jquery.com/Manipulation. It should be pretty straightforward.
If you're willing to consider non-JS alternatives, Stu Nicholls has some interesting html/css (no js) options on his CSS Play website:
http://www.cssplay.co.uk/menu/gallery3l
http://www.cssplay.co.uk/menus/tabmenu.html
(Among others)
I suppose it looks like this:
<html>
<h1>site name</h1>
<h2>page name</h2>
<h3>section</h3>
<p>some stuff</p>
<p>different paragraph</p>
<ul><li>a list</li></ul>
<h3>next section</h3>
<p>different stuff</p>
...
</html>
you could iterate over all direct children of html. At first h3 you start collection all subsequent items until the next h3. if a next h3 comes or page end you create a div, and add it after the starting h3 all collected elements should be removed from their parent (the html) and added as children of the div.
looking at http://docs.jquery.com/Traversing this should be easy. I'm not an expert on jquery, but it should be doable.
Dave Ward of Encosia has great 10 minute tutorial on jQuery, Firebug and selectors that builds exactly what you looking for.