i'm using owl carousel, when i click on slide there is a description div open outside of owl carousel hierarchy.
Please help me out.
Thanks a lot
I'm trying click function but its toggle the all description div's at once
$(document).ready(function() {
$(".owl-item").click(function() {
$(".carousel-item-desc1,.carousel-item-desc2,.carousel-item-desc3,.carousel-item-desc4").slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> need more here </div>
Before
After
Related
I have made a button within Revolution slider, that enables users to click the button to scroll down to the next section on the site.
However I am un-able to change the size of the button.
I am aware that it says "small" and I have tried changing this to "medium", but this does not change the size of the button.
Below is the code, thanks for any help!
<a onclick="scrollWin()" style="position:relative;" class='tp-button blue small'>
Scroll Down
<script>
function scrollWin() {
window.scrollBy(0, 900);
}
</script>
</a>
I have a bootstrap carousel in my page and I want to change slides using anchor tags or buttons from different div how to do it?
This can be done through jQuery.
$('#nextButton').on('click', function() {
$('.carousel').carousel('next');
});
$('#previousButton').on('click', function() {
$('.carousel').carousel('prev');
}):
try this one, you can use the href id in any div to handle the previous and next button
https://jsfiddle.net/rubhan/ok2ms939/1/
I am using this link to have a side bar that I can hide or display. How can I add a bar to the right side of the div, that I can click to trigger the hide/show?
So far I found I can do a border-right: 5px solid black in css to make a basic one.. But I actually have no clue how to make it clickable.. I'm sure there might be a name for what I want to add, but I have no clue what it is.
Any help would be appreciated.
EDIT:
Got it working with that jsfiddle. But then I messed with it to try and move it to the main content div so on hover it can expand out to the right, and also not hide after hiding side panel(which could be fixed with the css for the panel toggle) Here is my modified jsfiddle, but I can't seem to click it for some reason.
edited the fiddle to something closer to what I think you needed:
http://jsfiddle.net/y7L2qvy6/18/
**My apologies.
You're trying to add something like this then, right?
http://jsfiddle.net/y7L2qvy6/3/
**
The opening and closing of the navigation div is achieved with:
<!--put whatever text or image you like here-->
and requires that you are including jquery, bootstrap, and the following script:
<script src="js/jquery.js"></script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
Keep in mind that you must instruct the browser to load jquery before trying to run the script, like in the example above.
Finally, also make sure that all page content is inside of a div with an id of "page-content-wrapper", and that div must be inside of a div named "wrapper".
like so:
<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<!-- Navigation Content Here -->
</div>
<div id="page-content-wrapper">
<!-- Page Content Here -->
</div>
</div>
<script src="js/jquery.js"></script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
Hello I've converted the sudo image slider into a more of a content slider for my website and i want to the Nav Links (text) to be highlighted when active (on certain slides of the slider)
I've tried using: "active selector" but it only seems to work with real page links like
Home
Opposed to the slider with this:
Home
Note: the menu is not within the slider.
An example of what i mean is like the menu here but just text: http://rbista.com/demos/zwin/ (this is using easy tabs i'm using sudo slider)
Can this be done in css/html as i don't no JQuery ?
Any help would be great!
This should be enough
$(".customLink").click(function(e)
{
$(".customLink").removeClass("active");
$(this).addClass("active");
});
.customLink.active
{
some css here
}
I have a current webpage that is broken into two sections. The top section contains various controls for filtering content on the webpage, and the bottom section contains a grid of the content.
What I want is encapsulate the filter controls in a div tag that initially is completely hidden except for a button link that will say something like "Click to Expand". Upon clicking the button link the div will open up downward to expose the filter controls that are in it. However, I don't want the div to just suddenly appear, because that's too easy and boring. I want the opening of the div to be noticeable as it slides downward to expose the content.
Is this possible? If so, how do I go about achieving it? I'm not a CSS monkey, but I've done a fair amount with jQuery.
Thanks in advance for any suggestions.
Straight from http://api.jquery.com/animate/ ...
So, instead of clicking the div, you could just add the click function to a button somewhere else on the page.
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
style="position: relative; left: 10px;" />
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
You can use the jQuery slideToggle().
$('#expandBtn').click(function() {
$('#filterDiv').slideToggle('slow', function() {
// Animation complete.
});
});
As an alternative to jQuery there is also the scriptaculous.js blind down and slide down effects.