I'm trying to change the background image of the jumbotron div with jQuery when a new tab is clicked, like this:
$(".about").click(function(){
$('.active').toggleClass('active');
$('.about').toggleClass('active');
$('.jumbotron').fadeOut(500);
//change background image
$('.jumbotron').fadeIn(500);
});
I tried using $('.jumbotron').css('background-image',url('/path/to/new/image')); but when I include that line, the jumbotron background image doesn't display at all even before I've clicked any of the tabs. Could anyone explain why this is happening please?
You have some syntax errors otherwise everything is good!! keep url inside quotes as below:
$('.jumbotron').css('background-image','url(/path/to/new/image)');
Related
I am working on the project, here is my live link to the site code My link
Here u will see the owl slider of the product. when I toggle between the images the images and the whole content is moved to the top of the page behind the fixed header.
what I want is that the screen remain still and do not move or scroll to top or bottom
You need to prevent the default behavior of the anchor tag that you're using. Maybe try using this:
$(".horizontal-thumb ").click(function(e) {
// change slider image
// do something else
e.preventDefault(); // this is what you need
})
I am using cubeportfolio to get masonry filterable portfolio. Worked like a charm, but then I wanted to add a toggle inside the cbp-item.
This is the result (watch it on mobile): http://www.lichaamengeest.be/AA.php
You can see that, when toggling the content in the first cbp-item, the content comes up behind the cbp-item below, instead of the toggle content pushing the next cbp-item downwards. The height is not set fixed, so it should move freely.
The coder of cubeportfolio told me to add this code
jQuery('.cbp').cubeportfolio('layout'); But my unanswered question is: where and how to add that code? Here's the js file with toggle code: http://www.lichaamengeest.be/scripts/custom.js
I think your problem is the „position: absolute” on the „.cbp-item”. If you wrote the toggle function on your own try to get the height of the box and add this as new position for the following box, when you click on to toggle. So that it's recalculated it after every click.
I have a cbox that is not showing content as expected. It should show it as this image:
Instead, the inner box is not showing, but the scroll down is being done. The content is there, because I can see it in this image:
But it's not being shown inside the colorbox.
Any idea on why it's not working?
EDIT: As additional info, my colorbox.css is being loaded before the colorbox.js, and jquery is being loaded before colorbox.js.
After executing these lines:
$('#cboxOverlay').css('z-index', '99');
$('#cboxOverlay').show();
optionsContainer.show();
The white box is being created with no content. But for the second example, the white box is not being shown...
Where optionsContainer contains text at innerHTML and innerText.
It seems there are some custom z-index overriding colorbox z-index.
I am trying to add a background color selection to an E-Card site I am making for an assignment in college.
I have the button and the background set up, but cant seem to get the JS for it to work.
I am a newbie with javascript/jquery, so I'm aware I am probably making a ridiculous mistake, but my code so far is:
$(".pink").on("click", function() {
$(".card-preview img").css("background-color", "red");
});
Where ".pink" is the button you would press to the the background color of an image inside the "card-preview" div.
This way seems relatively simple, but doesn't seem to be working!
Any ideas/suggestions?
The .pink div has a dual class on it, the second class is ".box", which sets the size as there are a few intended color selections available.
The page in question is linked here: http://www.remotegoatdesign.com/sayhey/pages/edit-valentines-marc-card.html
Rewrite your code to:
$(function() {
$(".pink").on("click", function() {
$(".card-preview img").css("background-color", "red");
});
});
or place on bottom of page, berofe </body>
This makes your code run only after the DOM is loaded.
.card-preview img: you are changing the background colour of the img elements inside the div, not the div itself.
try using .click() it worked fine for me. check my fiddle
edit
noticed your selection divs for colors show class='box pink' i changed my fiddle to match.
edit
for the comment below: fiddle
I am using the SlidesJS JQuery plugin to display a sliding banner along the top of a webpage.
However, I am having troubles adding image captions that overlay on the images. As per the website above I create a new p with the class caption and enter my caption in that, but from what I can tell the plugin is thinking that this caption div is another slide and showing just the caption text after each of the images.
You can view the page here.
You might want to check the example SlidesJS with caption. A look into your html code and see right away that you are using one div block for all the images(slides). On the example code on the link, they split the images(slides) per div so that when you need to add a caption, you simply add a child inside div.
Their example has each slide within it's own and then the caption inside another div like so:
<div class="slide">
<img src="/images/myimage"/>
<div class="caption"><p>this image is awesome</p></div>
</div>
Without actually trying it, I think you may be missing the slide as well as the child caption classed div's