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")
});
Related
I am trying to enable view / hide feature in my faq questions, but however at the moment to trying to access to my child answers_body with children I got an error . children is not a function, how can I properly access to answers_body in order to change display:none to display:block
<section class="faqs">
<div class="accordion row">
<div class="__block col-lg-7 mx-auto py-3">
<div class="row justify-content-between align-items-start">
<div class="col-11">
<h3 class="__question">
demo
</h3>
</div>
<div class="col-1">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12"><path fill="none" stroke="#5267DF" stroke-width="3" d="M1 1l8 8 8-8" /></svg>
</div>
</div>
<div class="answers_body"> I want to access to this node in order to display it
<div class="col">
<p class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt justo eget ultricies fringilla. Phasellus blandit ipsum quis quam ornare mattis.
</p>
</div>
</div>
</div>
</section>
$('.__question').click(function(){
var $parent = $(this);
console.log($patern[0].InnerText)
});
If you are trying to do a toggle effect for your faq, then you can try the following.
$('.__question').click(function() {
var parent = $(this).parents('.accordion.row');
if (parent.find('.answers_body').hasClass('answers-active')) {
parent.find('.answers_body').removeClass('answers-active');
} else {
parent.find('.answers_body').addClass('answers-active');
}
});
Here you need to find the parent that is common to both the element you are clicking and the element you need show. Then using .find() method you can target the element and show. Refer the fiddle
UPDATE
Since you said this is not working, I think the parent class that is used for all faq is wrong. If you can update the code, I can help with that. Else you can use the following code.
$('.__question').click(function() {
var parent = $(this).closest('.row').siblings('.answers_body');
if (parent.hasClass('answers-active')) {
parent.removeClass('answers-active');
} else {
parent.addClass('answers-active');
}
});
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)
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.
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.