I am trying to trigger a show/hide of one div at a time.
What is happening is that all the divs (.shareLink) are opening at the same time.
Below is my jQuery:
$(document).ready(function(){
$(".shareLink").hide();
$("a.trigger").click(function(){
$(".shareLink").toggle("400");
return false;
});
});
Below is my HTML:
<dl class="links">
<dd>content</dd>
<dt class="description">content</dt>
<ul class="tools">
<li><a class="trigger" href="#">Share Link</a></li>
</ul>
</dl>
<div class="shareLink">
<?php print check_plain($node->title) ?>
</div>
Any help with the above problem would be much appreciated.
Cheers.
Based on your HTML, you need to do this:
$(function() {
$("div.shareLink").hide();
$("a.trigger").click(function(){
$(this).parents('dl.links').next('div.shareLink').toggle(400);
return false;
});
});
This walks up to the parent DL and then moves over to the next shareLink div and toggles it.
$(".shareLink").toggle("400");
Refers to any div on the page with a class of ".shareLink".
You will need to find a way to distinguish the specific div you want to show.
You might want to try:
$(document).ready(function(){
$(".shareLink").hide();
$("a.trigger").click(function(e){
e.preventDefault();
$(this).next().toggle("400");
});
});
The answer is it depends on the structure of your document. Here is a sample of something that will work with the above function.
<a class="trigger">click here</a>
<div class="shareLink">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
Related
This is probably a long shot but is there a way to get a collection of elements in JQuery or not without a specific tag/class/id, even the nested ones?
Let's say I have this piece of code:
<div class="container1">
Lorem ipsum dolor sit amet
<br><br>
</div>
<p>This is p 1
<div class="footer">
tessssst
<p>
p test
</p>
</div>
</p>
<div class="container">
tessst
</div>
<p>This is p 2
<div id="someID" class="container">
tessssst 2
</div>
</p>
Now, I'm using JQuery like this, in order to find all but div tags, including descendants:
$('body').find(':not(div, div *)')
In the result collection, I still get the div inside the p elements and I don't want that.
Is there any way to achieve that? I know that this div is part of h1 and since I just want to select elements and not removing or doing DOM manipulations it could be a weird thing to wish for but this is what I need.
The bigger problem - I need to retrieve all text nodes but to exclude some tags/classes/IDs. I'm doing so as suggested here but it's not good enough.
Thanks.
The code you provided seems to work, but maybe you could try this?
$('body').find("*").filter(":not(div)");
There is a jQuery function not(), which removes matching elements from the current set.
So all you need to do is
var nonDivs = $('body').find('*').not('div');
You can do that by first selecting all elements, then selecting <div>s and their descendants, and filtering the "all" results with the "divs" result using .not() (the red style is used to mark the matched set):
var all = $('body').find('*');
var divAll = $('body').find('div, div *');
var nonDiv = all.not(divAll);
nonDiv.css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
Lorem ipsum dolor sit amet
<br><br>
</div>
<p>This is p 1
<div class="footer">
tessssst
<p>
p test
</p>
</div>
</p>
<div class="container">
tessst
</div>
<p>This is p 2
<div id="someID" class="container">
tessssst 2
</div>
</p>
In the filter function check if it's a text node and also check all of its parents for class, id, tag name - whatever selectors you would like to filter by.
var textnodes = $('body').find("*").contents()
.filter(function () {
return (this.nodeType === 3 && $(this).parents("div").length <= 0);
})
.each(function () {
console.log($(this).text());
});
Here's a working example: https://jsfiddle.net/hracw15o/3/
I'm trying to figure out how I can add class on a specific element without affecting the other elements. Here is the page I have been working on
http://www.digitalspin.ph/test/federalland/careers/
If I trigger the "Send Resume" button. The contact form will slide in from the left. The problem is that it also affects the other elements.
Here is the code I have been working on.
<li id="post-<?php the_ID(); ?>" <?php post_class('six columns job-post'); ?> >
<div class="content">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<form>
<input type="button" class="contact-btn" value="Send your resume">
</form>
<div class="contact-form hide">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo neque augue, in pellentesque ipsum accumsan eget. Integer efficitur turpis vitae convallis elementum.
</p>
<?php echo do_shortcode('[contact-form-7 id="188" title="Careers Contact Form"]'); ?>
</div>
</div>
</li>
$(document).ready(function(){
$("input.contact-btn").click(function(){
$(".contact-form").addClass("animated slideInLeft").removeClass("hide")
});
});
You can traverse to closest li element using .closest() selector in clicked handler from clicked elements context this. then use .find() selector to target the element with class contact-form:
$("input.contact-btn").click(function(){
$(this).closest('li').find(".contact-form").addClass("animated slideInLeft").removeClass("hide")
});
Thats because you have more than one element that has .contact-form class. I prefer to bind the click event under the form and button container, so will no issues when you re-arrange the elements. Example:
jQuery('.category-job-posts').each(function() {
var $this = this;
jQuery('.contact-btn', $this).click(function(){
jQuery('.contact-form', $this).addClass('animated slideInLeft').removeClass('hide');
});
});
You need to find the closet parent with tagname 'li' to whom the button clicked belongs.
Then once the parent is selected get the element inside it with the 'contact-form' class.
Then just add the required class and remove the 'hide' class.
$("input.contact-btn").click(function(){
$(this).closest('li').find(".contact-form").addClass("animated slideInLeft").removeClass("hide")
});
I've got a setup working with the cycle2 plugin, but the link inside the pager area doesn't work, unless you right-click it and 'open in new window'. Suggestions?
<div class="cycle-slideshow" data-cycle-fx=fade data-cycle-timeout=50000 data-cycle-pager="#no-template-pager" data-cycle-slides="div" data-cycle-pager-template="">
<div id="tab1"><h1>Test Slide One</h1></div>
<div id="tab2"><h1>Test Slide Two</h1></div>
<div id="tab3"><h1>Test Side Three</h1></div>
<div id="tab4"><h1>Test Slide Four</h1></div>
</div>
<div id="no-template-pager">
<div class="tab1"><p>Lorem ipsum dolor sit amet.</p><p>Test Link</p> </div>
<div class="tab2"><p>Lorem ipsum dolor sit amet.</p><p>Test Link</p> </div>
<div class="tab3"><p>Lorem ipsum dolor sit amet.</p><p>Test Link</p> </div>
<div class="tab4"><p>Lorem ipsum dolor sit amet.</p><p>Test Link</p> </div>
</div>
See the fiddle, notice clicking the link in the pager area does nothing, but if you right-click it, the link opens.
I'm using the cycle2 too and had the same problem but it was resolved adding data-cyle-pager-eventbubble="true" or in my case pagerEventBubble: true. It bubbles the event click on DOM allowing the href to be seen and executed.
i'm using jquery 1.9.1, and the code is:
$(document).ready(function(){
$('.banner-imagem').cycle({
slides: "li",
timeout: 0,
fx: "fadeout",
speed: 400,
manualFx: "scrollHorz",
manualSpeed: 400,
pager: "#banner-nav",
pagerTemplate: "#per-slide-template",
loader: "wait",
log: false,
pagerActiveClass: "slide-ativo",
slideActiveClass: "slide-ativo",
slideClass: "slide-imagem",
pagerEventBubble: true
});
});
You can use stopPropagation on link when you click, like this:
jQuery(document).ready(function(){
$('#no-template-pager a').click(function (event) {
event.stopPropagation();
});
});
I am trying to create a row of HTML divs that expand and collapse when you click on them. Please see this jsFiddle to get an idea of what I mean: http://jsfiddle.net/Lm6Pg/3/. (You may have to expand the result pane or use the full screen result to get all the divs to appear on a single row.)
Currently, I am using One% CSS Grid to get all the divs to appear on one row, then toggling different CSS column classes to expand and collapse the divs according to the current state and what div was clicked.
<div id="content" class="onepcssgrid-1200">
<div class="onerow">
<div class="tile col4" id="about">
<h3>About</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="tile col4" id="other">
<h3>Other</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="tile col4 last" id="stuff">
<h3>Stuff</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
Here is my javascript (I've changed it from what's in the jsFiddle because I was messing around with dynamically determining which column classes needed to be toggled):
$(".tile").click(function() {
var tile = $(this);
var otherTiles = tile.siblings();
var currentSelectedTile = otherTiles.filter(".selected");
var unselectedOtherTiles = otherTiles.not(".selected");
var otherTileWeight, tileWeight;
if (currentSelectedTile.length) {
otherTileWeight = 3;
tileWeight = 3;
} else {
otherTileWeight = 4;
tileWeight = 4;
}
tile.toggleClass("selected col" + tileWeight + " col6", 600);
currentSelectedTile.toggleClass("selected col3 col4", 600);
unselectedOtherTiles.toggleClass("col" + otherTileWeight + " col3", 600);
});
This seems like a lot of code that might be wrapped up in a jQuery UI function or some other library that eluded me when I put this together. Is there an easier, more concise, or just plain better way to do this? The solution does not need to use jQuery nor One% CSS Grid, any library is fine. However, it does need to be in a responsive layout that preferably still functions as you'd expect when the divs are on top of each other.
I have a div containing information. Wraped around the div I have a 'a' tag so that when a user clicks anywhere around the div the fancy box opens.
However inside the div I andother link that when clicked instead of opening the fancy box it deleted the whole div. I used return false in the click event for the delete which worked.
I have now had to add .live to the click because newly created elemnet were not getting the click event.
Since then though when I click the delete link the div does delete but the fancy box opens also.
Thanks for any help.
$(".listContent").live('mouseenter', function(){
$(this).fancybox({
'type':'ajax',
});
});
$("div.removeCompare").live("click", function() {
$(this).parents(".listingContainer").remove();
return false;
});
Div
<div class="listingContainer grid_9 alpha omega">
<a class="listContent" href="adContent.html">
<div class="listingWrapper">
<div class="grid_8 alpha omega">
<div class="listingContent">
<div class="imgHolder">
<img src="imgs/cars/SearchThumb-10053325.jpg" width="100" height="75">
</div>
<div class="descHolder">
<div id="cars"></div>
<h3>Fancy Car</h3><div class="removeCompare">Remove</div>
<p>Lorem ipsum dolor sit amet, pri ex duis maiorum commune, illud viderer suscipiantur eam an. Dolorum recteque qui in. Pro inani nulla tacimates ex, qu</p>
<span class="listingPrice">€4,000</span>
<span class="listingDate">Listed: Today</span>
<span class="listingLocation">Co. Waterford</span>
<span class="listingViews">Viewed: 20 Times</span>
</div>
</div>
</div>
<div class="goTo goTo_unfocus grid_1 alpha omega">
<div class="gotoWrapper">
Click to View
<div class="imgVeiw"></div>
</div>
</div>
</div><!--End listingWrapper-->
</a>
</div>
Updated:
This code should most probably work.
$(".listContent").live('click', function(e) {
e.preventDefault();
$(this).fancybox({
'type': 'ajax'
});
console.log('inside fancybox creator');
});
$("div.removeCompare").live('mousedown', function(e) {
e.stopPropagation();
console.log('inside remove');
$(this).parents(".listingContainer").remove();
});
I think your problem was with event propagation - when you click on a child element the related event of parent too fires up. So e.stopPropagation() will stop that.
Inside the click event function of the div, unbind the mouseenter event for the inner element (which opens the fancybox), using the .die('mouseenter') event handler unbinding syntax.