Ok, now i have a new problem with this jQuery script.
In my foreach loop, i fetch out the product name and so on.
The thing is, i have 2 different products with 2 different descriptions.
But this code:
<div class="wiki-content">
<div class="box9">
<h1>Sample Box</h1>
<img src="http://www.wpthemegenerator.com/wp-content/uploads/2012/06/Image.jpg">
<?php
echo $getTheOffer['wiki_text'];
?>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra.</p><br/>
</div>
</div>
and this jQuery:
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('.wiki-button').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('.wiki-content').bPopup();
});
});
})(jQuery);
Gives me same output on both. I gonna mention that it is popup dialog windows, when i try put this on a other row. Not inside this popup it works just fine.
Thanks for any help! :)
EDIT,
I change the popup windows from class to id and now it shows the 2 different texts. But not right. product nr 2 shows product nr 1s text. and product nr 2 shows product nr 1s text.
You have to specify which .wiki-content you want to display depending on the button that you click. If the buttons and the contents are in table rows, you could do something like this
$('.wiki-button').bind('click', function(e){
var $tr = $(e.currentTarget).closest('tr'),
$content = $tr.find('.wiki-content');
$content.bPopup();
});
This will find the content that lives in the same row.
Related
I am using the following jQuery code to try to get the text inside the element and add it to my variable:
<script>
var title = $('h3').html();
alert(title);
</script>
However, my browser is alerting me 'undefined' instead of the value inside the tag. Any idea what I am doing wrong?
Here is the html section for reference:
<article>
<div class="row">
<div class="columns large-6 large-centered medium-8 medium-centered small-12">
<h3>This is the post title</h3>
<h4>written by <b>Myself</b></h4>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacinia urna sit amet convallis dictum. Curabitur non sodales orci. Praesent vel gravida felis. Cras ultricies velit mi, eget efficitur ipsum tempus nec.</p>
</section>
</div>
</div>
</article>
Thanks,
This is the solution using plain JavaScript; you don't actually need jQuery here.
var h3element = document.getElementsByTagName("h3")[0];
This returns an array of all h3 elements in the document, of which you'll take the 0th index. Then, simply access the innerHTML property:
var h3content = h3element.innerHTML;
A complete solution would look something like:
<script>
var title = document.getElementsByTagName("h3")[0].innerHTML;
alert(title);
</script>
Try to wait for your document to trigger the ready event, if your code is beyond your tag, for example in the header. And if you only need the text, use the text function in jQuery.
<script>
$(function() {
var title = $('h3').text();
alert(title);
});
</script>
Do something like:
alert(document.getElementsByTagName('h3')[0].innerHTML)
So I am trying to make a more/less content toggle feature, it worked just fine until I started adding more boxes to be toggled. I read up on using multiple event handlers and the suggestion was to use document.getElementsByClassName(); and iterate through them, but the second button when clicked does not show/hide the correct content, only the first one.
Any help is appreciated. The simpler way would be to use jQuery or assign different IDs to the buttons and call the function on each one but I'm sure it must be possible to just create/call the event listener once and have it work on every subsequently added element.
Here is my code:
HTML
<div class="card">
<div class="cardLessContent">
<h1>Here is a card</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor mi sollicitudin, tristique tortor eget, tempus elit. Vestibulum ante leo, aliquam ac dapibus at, auctor vitae ligula.</p>
</div>
<div id="cardMoreContent" class="cardMoreContent">
<p> Nam finibus nec augue at semper. Quisque sit amet ex eu augue rutrum aliquet. Suspendisse dui enim, gravida quis turpis a, auctor pellentesque velit.</p>
</div>
<button id="toggleContent" class="toggleContent toggledOff">More</button>
</div>
<div class="card">
<div class="cardLessContent">
<h1>Here is a card</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor mi sollicitudin, tristique tortor eget, tempus elit. Vestibulum ante leo, aliquam ac dapibus at, auctor vitae ligula.</p>
</div>
<div id="cardMoreContent" class="cardMoreContent">
<p> Nam finibus nec augue at semper. Quisque sit amet ex eu augue rutrum aliquet. Suspendisse dui enim, gravida quis turpis a, auctor pellentesque velit.</p>
</div>
<button id="toggleContent" class="toggleContent toggledOff">More</button>
</div>
JavaScript
const btnToggleContent = document.getElementsByClassName("toggleContent");
const cardMoreContent = document.getElementById("cardMoreContent");
var toggleContent = function() {
cardMoreContent.classList.toggle("showing");
this.classList.toggle("toggledOff");
if(this.classList.contains("toggledOff")) {
this.innerHTML = "More";
}
else {
this.innerHTML = "Less";
}
}
for (var i = 0; i < btnToggleContent.length; i++) {
btnToggleContent[i].addEventListener("click", toggleContent);
}
JSFiddle: https://jsfiddle.net/jw3qe9xf/6/
Id attribute should be unique in HTML.Otherwise it will only pick the first occurence of that Id.In your case you will always toggle the first cardMoreContent
Here is a simple solution for you by using event.target
Javascript
const btnToggleContent = document.getElementsByClassName("toggleContent");
const cardMoreContent = document.getElementById("cardMoreContent");
var toggleContent = function(e) {
e.target.previousElementSibling.classList.toggle("showing");
this.classList.toggle("toggledOff");
if(this.classList.contains("toggledOff")) {
this.innerHTML = "More";
}
else {
this.innerHTML = "Less";
}
}
for (var i = 0; i < btnToggleContent.length; i++) {
btnToggleContent[i].addEventListener("click", toggleContent);
}
JSFiddle : https://jsfiddle.net/c1gdjk25/
Yes , works only for first. This is reason :
you have multiply use ' id="toggleContent" ' same id value for more than one element it is wrong in basic.
Id attribute must be uniq !
Use example from this answer :
How to get child element by class name?
You will need only childNodes and loop trow it.
Count on that you can search child from child element also ...
after you remove all ids attributes change your javascript code to :
const btnToggleContent = document.getElementsByClassName("toggleContent");
var toggleContent = function(e) {
/*e.target will get the clicked element which is the button clicked and parentElement
gives you the parent element of this button which is the card you want to modify*/
var card = e.target.parentElement;
/*when you have the card you can use on its getElementsByClassName to retreive all
elements that have the class (cardMoreContent) in this case theres only one so you take
the first element from the array returned with [0]*/
var cardMoreContent = card.getElementsByClassName("cardMoreContent")[0];
//then rest of the code stays the same
cardMoreContent.classList.toggle("showing");
if(this.classList.contains("toggledOff")) {
this.innerHTML = "More";
}
else {
this.innerHTML = "Less";
}
}
for (var i = 0; i < btnToggleContent.length; i++) {
btnToggleContent[i].addEventListener("click", toggleContent);
}
I have two sections namely
1. section one
2. section two
I'm performing JQuery slide up and slide down between two div sections with plus and minus sign change..currently it works superbly i want to make one small change in my code when i click on section one contents of section two is hidden and vice versa i need both should be opened simultaneously can somebody help me out in achieving it Thanks!
http://jsfiddle.net/v9Evw/348/
HTML
<ul id="toggle-view">
<li >
<h3 style='background:#4c97d0;color:#fff;'>Section one</h3>
<span style='background:#4c97d0;color:#fff;' class='glyphicon glyphicon-plus'></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
</li>
<br>
<li>
<h3 style='background:#4c97d0;color:#fff;'>section two</h3>
<span style='background:#4c97d0;color:#fff;' class='glyphicon glyphicon-plus'></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
</li>
</ul>
JQUERY
var parent = $('#toggle-view'), // storing main ul for use below
delay = 200; // storing delay for easier configuration
// bind the click to all headers
$('li h3, li span', parent).click(function() {
// get the li that this header belongs to
var li = $(this).closest('li');
// check to see if this li is not already being displayed
if (!$('p', li).is(':visible'))
{
// loop on all the li elements
$('li', parent).each(function() {
// slide up the element and set it's marker to '+'
$('p', $(this)).slideUp(delay);
});
// display the current li with a '-' marker
$('p', li).slideDown(delay);
}
else {
$('p', li).slideUp(delay);
}
$('span',li).toggleClass('glyphicon-plus glyphicon-minus');
});
Remove the loop which changes the state on all the content areas. You only want to apply it to the selected content.
So now you are saying; if this is open, close it, otherwise open it.
if (!$('p', li).is(':visible')) {
$('p', li).slideDown(delay);
} else {
$('p', li).slideUp(delay);
}
http://jsfiddle.net/v9Evw/350/
Please find the updated fiddle
http://jsfiddle.net/v9Evw/349/
//$('li', parent).each(function() {
// slide up the element and set it's marker to '+'
$('p', $(this)).slideUp(delay);
// });
Only selected section will slide instead of section 1 and 2. Please see if this meets ur requirement
I am creating kind of a dual navigation menu/map functionality where you can click on certain locations and a new panel will display, hiding the previously viewed panel. Also with a map hover effect. Here is what I'm working on JSFiddle.
I'm trying to figure out a best method to shorten my functions as there would be multiple locations. The block below is what I'm repeating over and over again for new locations. It covers the click and hover on the map. I know repeating the block below isn't practical so I'm hoping someone can guide me.
$('a#united-states').click(function(event){
$('.list').removeClass('current');
$('div.united-states').addClass('current');
event.preventDefault();
})
$('span.us').mouseover(function(){
$('.list').removeClass('current');
$('div.united-states').addClass('current');
}).mouseout(function(){
$('div.united-states').removeClass('current');
$('.list').addClass('current');
}).css('cursor', 'pointer');
HTML
<div class="panel list current">
<ul class="locations">
<li>United States</li>
<li>Canada</li>
<li>Africa</li>
</ul>
</div>
<div class="panel united-states">
<h3>United States of America</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec quam tristique, ullamcorper dolor at, facilisis dui. Sed faucibus eros vel purus finibus congue. Phasellus non ante laoreet, faucibus metus vel, accumsan massa. Sed tincidunt eros sed purus interdum, id vehicula elit rhoncus. </p>
<p>Back to list</p>
</div><!--/.panel-->
The JSFiddle link should give a better idea. If there is not better method, just let me know I'm more than happy to just live with this :) Much appreciated!
Give all the region/country a elements a common class, say region and all the span elements a common class, say pin. Then for each a or span element replace the id with or add a data-attribute matching the region/country. Now, it won't matter how many regions you add, as long as you stick to these simple rules, the following code should work for all the regions/countries:
$('.region').click(function(event){
$('.list').removeClass('current');
var region = $(this).data('region');
$('div.' + region).addClass('current');
event.preventDefault();
});
$('.map > .pin').mouseover(function(){
$('.list,.panel').removeClass('current');
var region = $(this).data('region');
$('div.' + region).addClass('current');
}).mouseout(function(){
var region = $(this).data('region');
$('div.' + region).removeClass('current');
$('.list').addClass('current');
}).css('cursor', 'pointer');
DEMO
EDIT 1:
For the back link to work -- do the following. Change:
<p>Back to list</p>
To:
<p>Back to list</p>
Then add the following code:
$('.back-list').on('click', function(e) {
e.preventDefault();
$('.panel').removeClass('current');
$('.list').addClass('current');
});
You do not want to use duplicate IDs, every ID must be unique. In fact, you may not even need IDs.
DEMO
You can use the id attribute. For example:
$('a').click(function(event){
var loc = this.id; // united-states | canada | africa
if( loc == 'list' ) {
$('.panel').removeClass('current');
$('.list').addClass('current');
return;
}
$('.list').removeClass('current');
$('div.' + loc).addClass('current');
event.preventDefault();
});
and as for the mouse over, you can grab the class attribute and change class 'us' to 'united-states' to be consistent in:
<div class="map">
<!-- changed class to 'united-states' -->
<span class="united-states"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-location-128.png" alt="US location" /></span>
<!-- changed end -->
</div>
$('span').mouseover(function(){
var loc = $( this ).attr( 'class' ); // us | canada | africa
$('.list').removeClass('current');
$('div.' + loc).addClass('current');
}).mouseout(function(){
var loc = $( this ).attr( 'class' ); // us | canada | africa
$('div.' + loc).removeClass('current');
$('.list').addClass('current');
}).css('cursor', 'pointer');
First, let me explain the purpose of the popup. I have a list from a database of products, in a foreach loop.
Now I added code so that when you click the product, it opens a new box and shows content about this product. But for some reason, it only works on the first product.
I will post the code here, since I am very bad at jQuery/Javascript.
Here is the jquery script:
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#wiki-button').on('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#wiki-content').bPopup();
});
});
})(jQuery);
A snippet from the loop:
foreach ($getTheOffers as $getTheOffer ) { ?>
<div id="wiki-content">
<div class="box9">
<h1>Sample Box</h1>
<img src="imageurl">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra.</p><br/>
</div>
</div>
<?php } ?>
If you need to see more code, I will post it in pastebin.
Use class instead of id
So, in your HTML
<div class="wiki-content">
And in your jQuery
$('.wiki-button').on('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$(this).bPopup();
}
Change id to class. Id should be unique otherwise only the first element will be select
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('.wiki-button').on('click', function(e) {
//___^_____________
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('.wiki-content').bPopup();
// ___^___________
});
});
})(jQuery);
foreach ($getTheOffers as $getTheOffer ) { ?>
<div class="wiki-content">
<!-- _____^____________________-->
<div class="box9">
<h1>Sample Box</h1>
<img src="imageurl">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra.</p><br/>
</div>
</div>
<?php } ?>
Problem:
You have repeating ID's. The ID selector only expects one result, and gives you one, the first element. Hence, only the first is working.
Solution:
Use classes! Give a common class to your repeating elements and target that.