I am trying to do this on a wordpress website. I have searched and tried a few suggestions already posted but none have worked.
I want to hide the span if it contains zero when the page loads.
I have used the following code (placed in the head) but it won't hide the span.
<script type="text/javascript">
(function ($) {
var propertydata = $('span.property-data');
if (propertydata.text().trim() === '0') {
propertydata.closest('span.propertydata').hide();
}
});
</script>
Here is the HTML I am trying to hide:
<div id="dbst-show12" class="column rows other">
Year Built :
<span class="property-data">0</span>
</div>
Ultimately I would love to hide the parent "column" if possible but would settle if I could just get the zeros to disappear.
You can use a jQuery selector to select all 0's inside a span like this:
var selecton = $("span:contains(0)");
Then you can hide all the elements with the jQuery .hide() method:
selection.hide();
You also need to make sure that function is included inside a $(document).ready so the browser knows once the page is loaded it can run your function.
This would be the whole snippet:
$(document).ready(function(){
var selection = $("span:contains(0)");
selection.hide();
});
Here's a link to a JSFiddle with your given code: https://jsfiddle.net/kgill/uzpqdsoj/1/
You could similarly hide the whole column by selecting the div with a jQuery selector and hiding it the same way.
The problem is that doing:
var propertydata = $('span.property-data');
proertydata is getting all the values from all the spans texts so it will never be equal to 0.
You may want to do it this way:
<script type="text/javascript">
(function ($) {
jQuery.each( $('span.property-data'), function( i, val ) {
if ($(val).text().trim() === '0') {
$(val).hide(); //hides only the span
$(val).parent().hide(); //if you want to hide parent div also
}
});
})(jQuery);
</script>
Here's a JSFiddle:
https://jsfiddle.net/bv7u4hxb/1/
Related
I am trying to hide some divs when url contains an specific string.
For example, i have this code that hides the first div:
<div id="ficha">Hello</div>
<div id="ficha">world</div>
<div id="ficha">...</div>
<script>
if (/info|mapo/.test(window.location.href)) {
document.getElementById('ficha').style.display = 'none';
}
</script>
URLs:
www.example.com/all ------> Not hide the div
www.example.com/info-----> Hide the div
www.example.com/mapo---> Hide the div
The first problem with the script is that it only hides the first div saying Hello, but i want to hide all the divs. So, i think it's necessary to do a loop... ¿how can i do that?
The second thing is running two different scripts to hide different divs according the url string content.
Maybe this can be achived by making an else function. Always the loop its necessary and even better if it's executed after load page.
For example:
<div id="ficha">Hello</div>
<div id="ficha">Hello2</div>
<div id="ficha2">world</div>
<div id="ficha2">...</div>
<!-- First script hides divs with id="ficha" if url string has "info" or "mapo" -->
<script>
if (/info|mapo/.test(window.location.href)) {
document.getElementById('ficha').style.display = 'none';
}
</script>
<!-- Second script hides divs with id="ficha2" if url string has "all" -->
<script>
if (/all/.test(window.location.href)) {
document.getElementById('ficha2').style.display = 'none';
}
</script>
The code will be execute in Database Activity of Moodle.
Thanks in advance.
This script will help you.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function () { //The function to execute when the page is loaded
var string_contain = ''; //Set this as your string
var url = window.location.href;
if(url.indexOf(string_contain) >= 0) { //If url contains then...
var x = document.getElementsByClassName("your_class"); //Create an array that contains your divs with your_class class
for(var a = 0;a<x.length;a++) { //Do some stuff for each value of the array
x[a].style.display = 'none';
}
}
}
</script>
</head>
<body>
<div class="your_class"></div>
</body>
</html>
Remeber that the ID is associated with just one element, so it won't work if you're trying to access more than one element.
You've got a few issues here:
First, like user adeneo mentioned in their comment, you cannot share IDs. Classes, however, can be shared so you probably want your <div> elements to say class="ficha".
Second, you want to hide or show divs based off of a string in the URL, but your URLs are composed of unique paths. You're trying to hide divs, when you should just be building the pages differently. Unless there's more information you need to add about this.
www.example.com/mapo is, at least in the representation you've provided, a different HTML page from www.example.com/info so why not build them as separate pages rather than going through unnecessary logic to show and hide <div> elements?
The third issue: you don't want a for loop so much as a for-each loop. This first question will give you direction on how to select all elements with the specified class:
JavaScript get elements by class name and tag name
Then using the array you've selected from the above information, you can use Javascript Documentation for using forEach on arrays to change your elements' visibility.
Since its not unique, a CSS class would be more appropriate. Something like this should work:
function hideItemsByClass(className){
var matchedItems = document.getElementsByClassName(className);
for(var i = 0; i < matchedItems.length; i++){
matchedItems[i].style.display = 'none';
}
}
What I'm trying to do is, when one of six divs is clicked, a separate div will have 3 specific divs appear in it. Each of the original six divs have three similar but different divs related to it.
http://jsfiddle.net/petiteco24601/hgo8eqdq/
$(document).ready(function () {
$(".talkbubble").mouseout(function(){
$(".sidebar").show();
});$
$(".talkbubble").click(function(){
$
How do I make it so that when you click a "talkbubble" div, a different "sidebar" div appears with all its contained elements, and when you mouseout, the first talkbubble div automatically activates?
Here is a demo of how to do this: http://jsfiddle.net/n1xb48z8/2/
The main part of this example is some javascript that looks like this:
$(document).ready(function(){
showSideBar(1);
$('.expander').click(function(){
var sidebarIndex = $(this).data('sidebar-index');
showSideBar(sidebarIndex);
});
$('#Container').mouseleave(function(){
showSideBar(1);
});
});
function showSideBar(index){
$('.sidebarContent').hide();
$('.sidebarContent[data-index="' + index + '"]').show();
}
.data('some-name') will get you the attribute data-some-name="" on the specific element, this is a html 5 attribute and if you do not want to use it you can instead give each of the elements their own class names such as:
<div class="sidebarContent subBarContent_1">
<!-- content -->
</div>
and use the '.subBarContent_1' as your jquery selector instead. You would then also have to have some sort of data attached to your clickable divs to identify which one you wanna show, you could use a hidden field to do that like:
<input type="hidden" class="subContentSelector" value="subBarContent_1" />
The javascript for that looks like this:
$(document).ready(function(){
showSideBar(1);
$('.expander').click(function(){
var sidebarSelector = $(this).find('.subContentSelector').val();
showSideBar(sidebarSelector );
});
$('#Container').mouseleave(function(){
showSideBar('subBarContent_1');
});
});
function showSideBar(selector){
$('.sidebarContent').hide();
$('.sidebarContent.' + selector).show();
}
Ps. the overflow:hidden css is because chrome was messing up the placement of the sidebar content otherwise... oh chrome, you silly goose
I have an input box for zip code entry's, when a user inputs a zip code I want to show a specific DIV.
It starts with everything hidden except for the input box and go button, then the user enters a zip code and the matching DIV shows (the DIV ID will be the zip code) There maybe hundreds of DIVs and possible inputs.
Here is what I have so far, note it starts showing everything (not what I want) but it kinda works
$(document).ready(function(){
$("#buttontest").click(function(){
if ($('#full_day').val() == 60538) {
$("#60538").show("fast"); //Slide Down Effect
$("#60504").hide("fast");
}
else {
$("#60538").hide("fast"); //Slide Up Effect
$("#60504").show("500");
}
});
$("#full_day").change(function() {
$("#60504").hide("500");
$("#60538").show("500");
});
});
LINK to working File http://jsfiddle.net/3XGGn/137/
jsFiddle Demo
Using pure numbers as id's is what was causing the issue. I would suggest you change them to
<div id="zip60538">
Welcome to Montgomery
</div>
<div id="zip60504">
<h1>Welcome to Aurora</h1>
</div>
In the html (as well as in the css and the js as can be seen in the linked fiddle)
This will allow them to be properly referenced in the DOM
edit
jsFiddle Demo
If you had a lot of these to handle, I would probably wrap the html area in a div to localize it and then use an array to store the accepted zip codes, and make use of both of those approaches in the click event
$(document).ready(function(){
var zipCodes = [60538,60504];
$("#buttontest").click(function(){
var zipIndex = zipCodes.indexOf(parseInt($("#full_day").val()));
$("#zipMessage > div").hide("fast");
$("#zip"+zipCodes[zipIndex]).show("fast");
});
});
Start off with all the div's style of display: none;. On your button click simply check that a div exists with that ID, if so, hide all others (use a common class for this) and show the right one:
$("#buttontest").click(function() {
var zip = $("#full_day").val();
if ( $("#" + zip).length ) {
$(".commonClassDiv").hide();
$("#" + zip).show();
}
});
I've got a simple application that requires a DIV to be clicked, and in turn it shows another DIV which needs to have its content updated.
There are around 40 items that will need to be clickable and show the correct label for each.
Here is what I need to happen...
User clicks a DIV (drag_me)
Information box DIV is then shown (flavour_box)
the default word 'Ingredients' is swapped out with the content from the "flavour_descrip" div
Also update the 'choc_flavour' div with the name of the ingredient (choc_label)
The data comes from a database, so I'm unable to set individual ID's.
I had a similar issue with draggable's, but that was fixed, and I've tried doign somethign similar to no avail.
Here is the clickable DIV (flavour_descrip is set as hidden in the CSS)
<li class="drag_me">
<div>
<img src="RASPBERRY.png" />
</div>
<div class="choc_label">
Raspberries
</div>
<div class="flavour_descrip">
Our description will appear here for the DB
</div>
</li>
Here is the HTML for the popup box...
<div id="flavour_box">
<p class"flavour_description">Ingredients</p>
<div class="flavour_add">Add To Mixing Bowl</div>
</div>
Here is the jQuery snippet for the click (i've commented out the code I had started to rejig, but essentially I need to change the draggable.find to something that will work!)
$(".drag_me").click(function () {
//var htmlString = ui.draggable.find('.choc_label').html();
//$('.choc2_flavour').text(htmlString);
// update the description of the item
//var htmlString = ui.draggable.find('.flavour_descrip').html();
//$('.flavour_description').text(htmlString);
// on click of jar make box pop
$("#flavour_box").toggleClass("visible");
});
Any ideas how I can achieve this?
Added extra question
Now I've had my problem resolved, I need to perform one more task.
Inside the div that gets the details passed using "this", I need to be able to pass one more items to a different piece of script.
The DIV 'flavour_add' is clickable and will need to grab the flavour name to use to update some bits on screen and update a URL on the fly.
<div id="flavour_box">
<p class="flavour_name_label">Label</p>
<p class="flavour_description">Ingredients</p>
<div class="flavour_add">Add To Mixing Bowl</div>
</div>
This is the jQuery I have, but using "this" doesn't seem to work
$(".flavour_add").click(function () {
// hide the ingredient box
$("#flavour_box").toggleClass("hidden");
// show the continue box
$("#added_box").toggleClass("visible");
// get the flavour name
var flavourLabel = $(this).find('.flavour_name_label').text();
// update flavour URL
var _href = $("a.to_step_3").attr("href");
$("a.to_step_3").attr("href", _href + '&flavour=' + flavourLabel);
//$("a.to_step_3").attr("href", _href + '&flavour=TestFromAdd');
// update the mixing bowl list with the ingredient
$('.choc2_flavour').text(flavourLabel);
});
Use $(this) to get the reference to the clicked element:
$(".drag_me").click(function () {
var txt = $(this).find('.choc_label').text();
$("#flavour_box > .flavour_descrip").text(txt);
$("#flavour_box").toggleClass("visible");
});
Besides, there was a "typo" in your html code, replace:
<p class"flavour_description">Ingredients</p>
By:
<p class="flavour_description">Ingredients</p>
You can easily achieve this using jQuery.
$(".drag_me").click(function () {
$('.flavour_description').text($('.flavour_descrip').html());
// on click of jar make box pop
$("#flavour_box").toggleClass("visible");
});
I cannot seem to be able to find the divs for step: 4. Also update the 'choc_flavour' div with the name of the ingredient (choc_label)
I will assume that you mean 'flavour_add' in which case the code should look like this:
$('.flavour_add').text($('.choc_label').html());
Try this:
$(document).ready(function() {
var $flavourBox = $('#flavour_box');
var $flavourDesc = $flavourBox.children('.flavour_description');
var $chocFlavour = $flavourBox.children('.choc_flavour');
$('.drag_me').on('click', function() {
var $this = $(this);
$flavourDesc.html($this.children('.flavour_descrip').html());
$chocFlavour.html($this.children('.choc_label').html());
$flavourBox.addClass('visible'); //toggleClass will remove the class if it is there
});
});
get the text by using "this" (the actual clicked element) and then get the child flavour_descrip div
$(".drag_me").click(function () {
$("#flavour_box").show();
$('.flavour_description').text($(this).find('.flavour_descrip').text());
});
then show the flavour_box div and set the value of the div with the flavour_description class
The selected radio button will show its corresponding dropdown box.
For example, upon the selected radio button ‘Ontario’, a dropdown box with matching cities will show up.
I have the following working code for the above example:
<script type="text/javascript">
$(document).ready(function(){
$("#searchForm input:radio").change(function() {
var buttonPressed = $('[name="Region"]:radio:checked').val();
var cityElmntBox = document.getElementById("dispalyCityBox");
if(buttonPressed == 'Ontario'){
cityElmntBox.style.display='block';
} else {
cityElmntBox.style.display='none';
}
});
});
</script>
Instead of the sudden effect (display='block'), I wanted to use for the selected elements the slideDown() method.
So I replaced:
cityElmntBox.style.display='block';
with:
cityElmntBox.slideDown(500);
But this doesn’t work…, please can someone help me get it working?
Wrap it in jQuery:
$(cityElmntBox).slideDown(500);
Also you can simplify the var statement like this and you wont have to put it in a wrapper:
var cityElmntBox = $("#dispalyCityBox");
Use $('#dispalyCityBox') instead of document.getElementById("dispalyCityBox").
Try $('#dispalyCityBox').slideDown(500) instead.
By using cityElmntBox.slideDown(500); you're trying to use a jQuery method on a non-jQuery object.