I'm trying to append $ symbol to slider label generated using Foundation.js framework, here's the fiddle and here's the HTML code:
<div class="row">
<div class="small-10 medium-11 columns">
<div class="range-slider" data-slider data-options="display_selector: #sliderOutput3;">
<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
</div>
</div>
<div class="small-2 medium-1 columns">
<span id="sliderOutput3"></span>
</div>
</div>
The current label is generated from id="sliderOutput3" and is passed using data-slider data-options="display_selector: #sliderOutput3;"
I've been trying from couple of hours to add $ symobol to the label, any help would be appreciated
Ideally on_change method could be used something like this
$(document).foundation({
slider: {
on_change: function () {
var value = $('.range-slider').attr('data-slider');
$('#sliderOutput3').html(value + '$');
}
}
}).foundation('joyride', 'start');
HOWEVER THIS WILL NOT WORK.
From the source code it looks like foundation.js triggers on_change(source) and then sets the value(source) to #sliderOutput . Which means whatever is done to #sliderOutput in on_change will be overridden.
You have two options
Option 1
Have another span with $ symbol. Like this
<div class="small-2 medium-1 columns">
<span id="sliderOutput3"></span>
<span>$</span>
</div>
Here is a demo http://jsfiddle.net/dhirajbodicherla/z3h8gzqb/2/
Option 2
Use settimeout inside on_change method like this
on_change: function () {
var value = $('.range-slider').attr('data-slider');
setTimeout(function () {
$('#sliderOutput3').html(value + '$');
}, 0);
}
Here is a demo http://jsfiddle.net/dhirajbodicherla/z3h8gzqb/4/
I would personally recommend option 1. Option 2 will work but with a delay and just doesn't feel right.
Related
I have some nested <div>s where I want to call a function on click of one of the nested <div>, however I am not able to achieve it.
Here is my HTML :
<div class="seat available">
<div id="2020" class="seat-click"></div>
<div class="tootltip-text">
<p>Name : <span id="id31">Subham<span><button>Ok</button></span></span></p>
<p>Seat No :<span id="13-tooltip-count">111</span></p>
<p>Team :<span id="id32">Abc</span></p>
</div>
</div>
Here is my jQuery :
$('.seat-click').on('click', function () {
console.log('Hello');
});
For clear understanding, refer to https://jsfiddle.net/47s8q2pv/4/
Here, I want the click function to be called only when I click <div id="2020" class="seat-click"></div>.
This can be achieved if I change the jQuery to
$('.seat-click').on('click', function () {
console.log('Hello');
});
If I do so, then my <div class="tootltip-text"> will also call the same click function, which I don't want because I will have some buttons and clickable items inside the tooltip in future.
Is there any workaround for this?
Thanks in advance.
As #entiendoNull said, your seat-click element is of height 0.
You can either set the height of that element or write the click event handler on the seat element instead using:
$('.seat').on('click', function () {
console.log('Hello');
});
The div you're using are not displayed in the browser as <div id="2020" class="seat-click"></div> doesn't have any width or height.
I don't understand what you want for this case, but if you want to make the button where the tooltip appears able to be clicked, maybe this is right for you
<div class="seat available">
<div id="2020" class="seat-click">
<div class="tootltip-text">
<p>Name : <span id="id31">Subham<span><button>Ok</button></span></span></p>
<p>Seat No :<span id="13-tooltip-count">111</span></p>
<p>Team :<span id="id32">Abc</span></p>
</div>
</div>
</div>
My guess is what I want to achieve should be easy, but due to my lack of knowledge of front-end development, I cannot manage to solve issue. Have a page that works with AJAX-filters that users can select. Filters that are currently applied show up within <div> with id=current-filters.
HTML looks like this:
<div id="current-filters-box">
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<!-- here every single applied filter is displayed -->
</div>
</div>
</div>
Need to hide the the entire DIV current-filters-box in case no filter is applied.
The page uses a Javascript file, bundle.js which is massive, but contains the following line:
s=document.getElementById("current-filters")
Therefore tried the following if-statement to hide the DIV:
if(s.length<1)$('#current-filters-box').hide()
and
if(s=0)$('#current-filters-box').hide()
But this does not seem to have any effect. Can someone tell, what I did wrong?
Demo of page can be found here
EDIT: this is what the HTML looks like when filters are applied:
<div id="current-filters-box">
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<div class="badge-search-public">
<strong>Humanities & Languages</strong> <span class="x" data-property="disciplines" data-value="4" onclick="filter.removeFilter(this)">×</span>
</div>
<div class="badge-search-public">
<strong>January</strong> <span class="x" data-property="months" data-value="1" onclick="filter.removeFilter(this)">×</span>
</div>
</div>
</div>
Both of your conditions are incorrect or I would say they are not doing what you think they do.
s.length will always prints undefined so instead of s.length<1 you could use s.children.length
and the second one is not a condition rather it is an assignment
s==0 // condition
s=0 //assignment
the correct condition for your requirement would be
if(s.children.length<1){
I have assigned snippets for illustration.
Without filters
s = document.getElementById("current-filters")
console.log(s.children.length);
if (s.children.length < 1) {
$('#current-filters-box').hide(1000)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="current-filters-box">
filter box
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<!-- here every single applied filter is displayed -->
</div>
</div>
</div>
Without filters
s = document.getElementById("current-filters")
console.log(s.children.length);
if (s.children.length < 1) {
$('#current-filters-box').hide(1000)
}
<div id="current-filters-box">
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<div class="badge-search-public">
<strong>Humanities & Languages</strong> <span class="x" data-property="disciplines" data-value="4" onclick="filter.removeFilter(this)">×</span>
</div>
<div class="badge-search-public">
<strong>January</strong> <span class="x" data-property="months" data-value="1" onclick="filter.removeFilter(this)">×</span>
</div>
</div>
</div>
Try this .
if( $('#current-filters').is(':empty') ) {
$('#current-filters-box').hide()// or $('#current-filters-box').css("display","none")
}
You are performing an assignment, try..
if (s.children.length)
Using vanilla JavaScript, you can check if the current-filters div is empty or not and toggle the parent div current-filters-box like this:
s= document.getElementById("current-filters");
t= document.getElementById("current-filters-box");
if(s.children.length<1) {
t.style.display = 'none';
// t.style.visibility= 'hidden'; <<-- use this if you want the div to be hidden but maintain space
}
else {
t.style.display = 'block';
// t.style.visibility= 'visible'; <<-- use this if you used visibility in the if statement above
}
You can achieve this by adding your own variable which counts or maintains your applied filters, e.g.
var applied_filter_count = 0;
at every time filter is applied
applied_filter_count++;
if(applied_filter_count) {
$('#current-filters-box').show()
}
and at every time filter is removed
applied_filter_count--;
if(!applied_filter_count) {
$('#current-filters-box').hide()
}
and by default current-filters-box should be display:none
When i click on SHOW MORE in one of the divs generated, in every div the footer div shows up with options Test1, Test2. I want the function to apply to the div im clicking on only. Help please :(
#foreach ($articles as $article)
<div class="row">
<div class="panel-heading">{{$article->title}}</div>
<div class="panel-body">{{$article->content}}</div>
<div class="panel-footer">
<div class="more" onclick="showPortals()">
Show More</div>
<div class="other_sources">Other Sources:
Test 1,
Test 2
<span class="less" onclick="hidePortals()">Show Less</span>
</div>
</div>
</div>
#endforeach
<script>
function showPortals() {
$(".other_sources").show();
$(".more").hide();
}
function hidePortals() {
$(".other_sources").hide();
$(".more").show();
}
</script>
Send the current element to the method
<div class="more" onclick="showPortals(this)">
<span class="less" onclick="hidePortals(this)">Show Less</span>
Use jquery to and hide/show the desired elements
function showPortals(element) {
var $panelFooter = $(element).closest('.panel-footer');
$panelFooter.find(".other_sources").show();
$panelFooter.find(".more").hide();
}
function hidePortals(element) {
var $panelFooter = $(element).closest('.panel-footer');
$panelFooter.find(".other_sources").hide();
$panelFooter.find(".more").show();
}
You can access the object you’re clicking via this object. You can pass it to your function:
<div class="more" onclick="showPortals(this)">
<span class="less" onclick="hidePortals(this)">Show Less</span>
Once you have the object representing your element (here, it will be div and span respectively), you can wrap it inside $ to get a jQuery object. Then, you can use .closest('.panel-footer') on the jQuery object to get your panel footer, and .find(selector) to find relevant objects inside the current panel-footer:
function showPortals(clickedElement) {
var $panelFooter = $(clickedElement).closest('.panel-footer');
$panelFooter.find(".other_sources").show();
$panelFooter.find(".more").hide();
}
function hidePortals(clickedElement) {
var $panelFooter = $(clickedElement).closest('.panel-footer');
$panelFooter.find(".other_sources").hide();
$panelFooter.find(".more").show();
}
However, onclick="hidePortals(this)" is not a recommended way of doing things because you’re mixing JavaScript with HTML. Instead, it’s recommended that you remove onclick="..." handlers and use jQuery’s .click handler, like this:
<script>
$(function() {
$('.more').click(function () {
var $panelFooter = $(this).closest('.panel-footer');
$panelFooter.find(".other_sources").show();
$panelFooter.find(".more").hide();
});
$('.less').click(function () {
var $panelFooter = $(this).closest('.panel-footer');
$panelFooter.find(".other_sources").hide();
$panelFooter.find(".more").show();
});
});
</script>
Change your selector to reflect each record's id.
#foreach ($articles as $article)
<div class="row">
<div class="panel-heading">{{$article->title}}</div>
<div class="panel-body">{{$article->content}}</div>
<div class="panel-footer">
<div class="more-{{$article->id}}" onclick="showPortals({{$article->id}})">
Show More</div>
<div class="other_sources-{{$article->id}}">Other Sources:
Test 1,
Test 2
<span class="less" onclick="hidePortals()">Show Less</span>
</div>
</div>
</div>
#endforeach
<script>
function showPortals(id) {
$(".other_sources-"+id).show();
$(".more-"+id).hide();
}
function hidePortals() {
$(".other_sources").hide();
$(".more").show();
}
</script>
Add a click event to every div:
One way:
$( document ).on( "click", 'div', doSomething);
But if you are trying on an specific id, you may change your selector.
I am trying to figure out how to do this, but I can't get it.
It's supposed to be like a step by step-thing. When pressing the image, both the text and image will change. There are supposed to be 3 steps.
I have been trying a little bit js and php, but it haven't helped yet. Also CSS, but it's a little bit hard because it's 3, and not 2 steps. (I have been trying this e.g.: http://jsfiddle.net/eliranmal/2rwnz/)
<div id="forsideslides" class="row">
<div class="container">
<div id="forsideslides_tekst" class="col col-lg-6 col-sm-6"><div class="well">
<h1>Step 1</h1>
<p class id="forsideslides_innhold_tekst">Text 1 out of 3</p>
</div></div>
<div id="forsideslides_bilde" class="col col-lg-4 col-sm-4"><div class="well">
<img src="<?php bloginfo('stylesheet_directory'); ?>step1.png">
</div></div>
</div>
</div>
One of the codes I have been trying to use is the following:
$('.slider_innbokskontroll').click(function(){
var $this = $(this);
$this.toggleClass('slider_innbokskontroll');
if($this.hasClass('slider_innbokskontroll')){
$this.text('Les mer');
} else {
$this.text('Les enda mer');
}
});
But it was not what I have was looking for.
By pressing the image (see code below) it should change.
<div id="forsideslides_bilde" class="col col-lg-4 col-sm-4"><div class="well">
<img src="<?php bloginfo('stylesheet_directory'); ?>step1.png">
</div></div>
It should be changing like step1.png => step2.png (don't bother about the details with the link, I just made it simple to get it easier to understand)
The text below should also change:
<div id="forsideslides_tekst" class="col col-lg-6 col-sm-6"><div class="well">
<h1>Step 1</h1>
<p class id="forsideslides_innhold_tekst">Text 1 out of 3</p>
</div></div>
E.g like:
Step 1 -> Step 2
Text 1 out of 3 -> Text 2 out of 3
And so forth...
As I see it, it is relatively simple, but I have really no idea of what I am doing. Is there someone who could help me finding the solution? A short code I may understand would be fine.
Thank you.
Looks to me like you are not targeting the correct DOM element.
In your example jQuery code:
$('.slider_innbokskontroll').click(function(){
var $this = $(this);
$this.toggleClass('slider_innbokskontroll');
if($this.hasClass('slider_innbokskontroll')){
$this.text('Les mer');
} else {
$this.text('Les enda mer');
}
});
You are trying to change the $(this) object, instead of what you want above.
So instead do something like this:
$('.slider_innbokskontroll').click(function(){
$('#forsideslides_tekst h1').text('Step 2');
$('#forsideslides_tekst p').text('Text 2 out of 3');
$('#forsideslides_bilde img').attr('src', 'newimage.jpg');
});
where your on click will have the class slider_innbokskontroll
EDIT here is the jsfiddle: http://jsfiddle.net/2rwnz/204/
using your HTML code:
<div id="forsideslides" class="row">
<div class="container">
<div id="forsideslides_tekst" class="col col-lg-6 col-sm-6">
<div class="well">
<h1>Step 1</h1>
<p class id="forsideslides_innhold_tekst">Text 1 out of 3</p>
</div>
</div>
<div id="forsideslides_bilde" class="col col-lg-4 col-sm-4">
<div class="well">
<img src="http://placehold.it/350x150">
</div>
</div>
</div>
</div>
the jQuery:
$("#forsideslides_bilde img").click(function(){
if ($(this).attr('src') == 'http://placehold.it/350x150') {
$('#forsideslides_tekst h1').text('Step 2');
$('#forsideslides_innhold_tekst').text('Text 2 out of 3');
$(this).attr('src', 'http://placehold.it/350x200');
} else if($(this).attr('src') == 'http://placehold.it/350x200') {
$('#forsideslides_tekst h1').text('Step 3');
$('#forsideslides_innhold_tekst').text('Text 3 out of 3');
$(this).attr('src', 'http://placehold.it/350x300');
}
});
You can also use a global variable to detect which step, but just because I want to show you how you can detect which image i coded it that way.
You need to place the click event on your image first and then change the text...
Here is an example with jquery:
$('#forsideslides_bilde img').click(function() {
//Change text
$('#forsideslides_innhold_tekst').html('New text');
//Change image src
$('#forsideslides_bilde img').attr('src', 'newImageLocation.png');
});
You can try calling a JavaScript function when the image is clicked. In order to do that, you'll need to assign an onclick event listener to the image tag. In my example I'm using getElementsByName() so I'm giving each element a name tag as well...
<h1 name="change">Step 1</h1>
<p name="change">Step 1 of 3</p>
<img src="step1.png" name="change" onclick="nextStep()" />
Then you can use the Javascript code to get each one of the elements and change them accordingly. You should be able to add in the PHP method call for the image name without any issues.
<script language="javascript">
function nextStep() {
var changeElements = document.getElementsByName("steps");
changeElements[0].innerHTML = "Step 2"; // header tag
changeElements[1].innerHTML = "Text 2 out of 3"; // paragraph tag
changeElements[2].src = "<?php bloginfo('stylesheet_directory'); ?>step2.png"; // image tag
</script>
If the bloginfo('stylesheet_directory'); method call doesn't work within the JS code, you can assign that to a PHP variable instead and reference that variable in the JS code.
I've got this code below, with different data, repeated over 10 times on the page I am working on:
HTML:
<div class="kpaGraph">
<p>Target: 43%</p>
<div class="progress">
<div class="bar"></div>
</div>
</div>
<div class="kpaBottom">
<div class="strong">
<p>311</p>
</div>
<div class="weak">
<p>number of teachers trained</p>
</div>
</div>
I want to alter the number in div.strong p (311) based on the number in div.kpaGraph p (43%) in the same manner across all instances of this code with Javascript/ jQuery. What is the cleanest way to do this? Should I select all $('div.kpaGraph p') and then use each() Or should I create a function and run it on all of them?
Thanks!
You can use the following to find the proper element in conjuntion with an .each() on $('div.kpaGraph p'):
$(this).parent().next('div.kpaBottom').find('div.strong p')
For example, using the following will take the value in the kpaGraph p node and append it to the p node in the following kpaBottom node:
$('div.kpaGraph p').each(function () {
$(this).parent().next('div.kpaBottom').find('div.strong p').html('foo');
});
jsFiddle example
There are a few ways.
You can use "next".
$('.kpaGraph').each(function(){
var $kpaStrong = $(this).next('.kpaBottom .strong p');//this is the elm that has 311
});
Or you have to somehow create a relation between them so you know they go together, like a common parent.
<div class="kpaWr">
<div class="kpaGraph">
<p>Target: 43%</p>
<div class="progress">
<div class="bar"></div>
</div>
</div>
<div class="kpaBottom">
<div class="strong">
<p>311</p>
</div>
<div class="weak">
<p>number of teachers trained</p>
</div>
</div>
</div>
Then with jQuery you can select it like so:
$('.kpaGraph').each(function(){
var $kpaStrong = $(this).closest('.kpaWr').find('.kpaBottom .strong p');//this is the elm that has 311
});
Something like this might be pretty clean too:
$("div.strong p").text(function(index, text){
return $(this).closest("div.kpaBottom").prev("div.kpaGraph").find("p").text();
});
That would change the text to Target: 43% in your example.