This question already has answers here:
Switching a DIV background image with jQuery
(14 answers)
Closed 8 years ago.
I have created a parent div. Inside that div there are multiple child divs: the first one is holding a background image, the second one, the website name, and the third one, some text.
Using jQuery, when a user hovers on the second div, i.e. website name div, the third div i.e text div is visible.
Now what I want is, when the text div becomes visible, to also replace the image in the first div. Here is my HTML and jQuery code so far:
HTML:
<div class="layer-3" style="opacity: 1;">
<a href="#">
<div class="contentImg3">{Div holding the image as a background}</div>
<div class="contentBlock3" style="opacity: 1;">
<span class="btn-block">
<span class="help-block webHdln">Website Name</span>
</span>
</div>
<div class="contentText3">text Div</div>
</a>
</div>
<!-- .layer-2 ENDS -->
JS:
$(".contentBlock3").mouseenter(function () {
$('.contentText3').fadeIn(1500);
$('.contentImg').css("background-image", "images/gurus_bw.jpg)");
$('.contentImg').css("background-position", "top 30px)");
});
The CSS line is not working... What am I doing wrong ?
change
$('.contentImg').css("background-image", "images/gurus_bw.jpg)"); // miss: url(..
to
$('.contentImg').css("background-image", "url(images/gurus_bw.jpg)");
read CSS background-image Property
Related
When I set a paragraph element to a javascript variable with innerHTML, the paragraph element is displayed without any CSS of its divs. I am also using bootstrap.
I have tried applying style to the paragraph itself, but it is not registered/displayed with the javascript variable.
Here is the HTML with the bootstrap styling and paragraph element
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-green">
<div class="inner">
<h3><p font="38px" id="bounce_rate"></p></h3>
<p>Bounce Rate</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars"></i>
</div>
</div>
</div>
Here is the JS that sets the variable using innerHTML
var bounce_rate = document.getElementById('bounce_rate');
// response.result["values"][0][0] is from JSON and works as intended
bounce_rate.innerText = response.result["values"][0][0];
I expected the styling tags applied to the paragraph element to be applied to the javascript string. The string is displayed, it just does not have styling.
The element does not have a 'font' attribute, so if your intend is to give the <p> element a font-size, the styling should be like this:
<h3><p style="font-size:38px" id="bounce_rate"></p></h3>
Additionally, nesting a paragraph text inside a heading text is not the right convention. If you wish to have a specific text inside <h3> tag to have a font-size of 38px, use <span> tag instead:
<h3><span style="font-size:38px" id="bounce_rate"></span></h3>
This question already has answers here:
Toggle CSS Classes using JavaScript - Error
(3 answers)
Closed 4 years ago.
I have a navigation with three links. What I want to do is to show one of three boxes paired on these links if a specific link is clicked. I have these <li> elements with data-nav set:
<li class="active" data-nav="1">Prerender</li><li data-nav="2">Prefetch</li><li data-nav="3">Preconnect</li>
I also have these three boxes, which should be visible only if paired <li> element is clicked
<div class="content-box box1">
<h3 id="isPrerender"> Prerendered page: <span id='pagetitle'></span></h3>
</div>
<div class="content-box box2">
<h3 id="isPrerender"> Page2: <span id='pagetitle'></span></h3>
</div>
</div>
This is what I have in my .css file
.box1, .box2, .box3{display: none;}
.expanded{display: block !important;}
This is where I set the expanded class on the box which is paired with the <li> element clicked:
for (var i = 0; i < menu_items.length; i++) {
menu_items[i].onclick = function() {
var navId = this.getAttribute('data-nav');
document.getElementByClassName('box' + navId).classList.add('expanded');
}
}
}
The problem is that display: none is still set even when I add the expanded class. If I look into console, the display: block rule is here but is erased. How to rewrite It?
I think you can set display none in first load with JavaScript or (hide element) then in function set display block or (show the element)
And don't use !important for the class if you want to replace or you should remove class then add other class
I'm implementing a simple jQuery script on a website that loads content from one section of a webpage into the 'display container' on the same webpage.
The content i'm loading is multiple div's which are all wrapped in an outer <div> which has been hidden from view.
I have the display container div and several links the use can click on. Each time they click a link, the appropriate matched content is loaded in to the display container.
My jQuery.
$(".Prod-Link-2").click(function(e){
e.preventDefault();
$("#ITARGET").empty();
$("#ITARGET").prepend('<img id="theImg" src="http://sensing-precision.com/wp-content/uploads/2015/12/page-loader.gif" />');
$("#ITARGET").load($(this).attr('href'));
});
Menu HTML
<div class="MPD">
<div class="Option">
<a class="Prod-Link-2" id ="DEF" href ="/electricalelectronic-products/alf150 #specTable" ><p>SPECIFICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #COMPARE" ><p>ALF150 v ALF150+</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #FEAT" ><p>APPLICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #ACCESSORY" ><p>ACCESSORIES</p></a>
</div>
</div>
The Target div
<div class="Info-Target" id="ITARGET">
</div>
So my problem is this all works except one of the links.
My hidden div has 4 content divs and 2 tables inside which all have their own IDs. SPECIFICATIONS grabs the #specTable, APPLICATIONS grabs the #FEAT div etc etc.. ACCESSORIES will not load the #ACCESSORY div at all and I don't know why. The script initializes and the page loader gif is displayed, but then instead of displaying the content I'm trying to load.. it displays nothing.
The hidden area format
<div style="display: none;">
<div id ="COMPARE"> some content </div>
<table id="specTable"> some content </div>
<div id ="ACCESSORY"> some content </div>
etc ....
</div>
For test purposes
<div id="ACCESSORY">
<p> This is the accessory div </p>
</div>
No matter what I change the name to in the ID tag and the links href attr, it will not load (I even tried making a new div with a different name and moving the div up to top of the hidden content area thinking it was maybe a loading issue), but if I change the links href attr to one of the tables or a different div such as #FEAT or #specTable.. it loads that fine.
My gut feeling is that there is some qwirk with jQuery and .load() that i'm unaware of.
This problem may be CSS related. I've just taken a look at a couple of products, and wherever the content includes lists, the display appears blank because of extremely excessive white-space.
This CSS rule seems to be the culprit:
.Features li:before { content: url(#)!important; }
This question already has answers here:
How to find the closest event element
(2 answers)
Closed 7 years ago.
I opened post where i asked for assistance with jquery code:
How to find the closest event element
unfortunately, other user didn't read my issue.
I have A link. clicking on it will show/toggle div. my problem is that my div is not always located at the same level from the A link. sometimes the A link is 1 level upon the hide DIV. sometime it's 2 levels or more. sometime it's below it
how can I find the closest DIV, that contain the class ".hidebox", to the A link?
<a href="#" class="hideBox-tab " >show div</a>
$(".hideBox-tab").click(function(){
$(this)
.parent().parent()
.find(".hideBox")
.toggle();
return false;
});
If you and an <a> to show/toggle the div the <a> must be outside the div:
toggle and show div
<div class="hideBox">
Content here
</div>
Then you need to find in your HTML one tag that allways englobes a.hideBox-tab and div.hideBox.
For example: div.partial-content:
<div class="partial-content">
toggle and show div
<div class="hideBox">
Content here
</div>
</div>
And your JS will be like this:
$(".hideBox-tab").click(function(){
$(this).closest(".partial-content").find(".hideBox").toggle();
});
I created a snippet, take a look at it:
$(".hideBox-tab").click(function(){
$(this).closest(".partial-content").find(".hideBox").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="partial-content">
toggle and show div
<div class="hideBox">
Content here
</div>
</div>
<div class="partial-content">
toggle and show div
<div>
<div class="hideBox">
Content 2 here
</div>
</div>
</div>
This solution works for one or more levels between a.hideBox-tab and div.hideBox.
This question already has answers here:
jQuery: How to get to a particular child of a parent?
(5 answers)
Closed 8 years ago.
When i click on expandable-icons-cancel I want to save a child label of form-group div.
Here is the structure:
<div class="form-group ">
<label class="" style="padding-top:10px;"> Long Title</label>
<span class="value ">
<div class="expandable">
<div class="expandable-icons">
<img class="expandable-icons-cancel" style="display:none;" src="test/cancel.png">
</div>
</div>
</span>
</div>
And function:
jQuery('.expandable-icons-cancel').click(function() {
var parentDiv = jQuery(this).parents('div.expandable'); //-works, but how can i get upper?
// How to get 2 steps upper to form-group?
// How to get get child label text of form-group and save in var?
}
You can use closest(), like this
jQuery(this).closest(".form-group");
for the label text you can do...
jQuery(this).closest(".form-group").find("label").text();
if you know label will always be a direct child of .form-group, you can use children() in place of find(). If there is a possible for multiple labels and you only want to get the first, you can place eq(0) after getting the label.