I have an issue concerning the slideUp() method. It works only for the last element (Panel 3). The first two slide down and I have no idea why.. Please keep in mind that I just started with jQuery and I'm really a newbie.
Here is the jQuery code:
$(document).ready(function () {
$('.panel').on('click', function() {
$(this).slideUp(600);
});
});
And here is the JSfiddle -> http://jsfiddle.net/py4tfq3f/2/
Thank you for your time!!
Change display:inline-block from the panel div to float:left,it solves the issue.
DEMO
CSS:
.panel {
margin: 50px 0 0 10px;
width: 200px;
height: 200px;
font-family: tahoma;
float:left;
border: 2px solid gray;
border-radius: 5px;
overflow: hidden;
}
Related
I'm using slick-carousel on my website and have such problem. http://prntscr.com/i9ojqf
I added border bettwen slides by this code: border-right: 5px solid red;
Question is: how can i get rid of border for the very last visible slide here?
Thanks!
<div class="slider js-slider">
<img /> four images here
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script>
$(function() {
$('.js-slider').slick({
slidesToShow: 4
});
});
</script>
body {
background-color: #ff0;
}
.slider {
width: 522px;
margin: 150px auto 0;
border: 5px solid green;
}
.slick-slide {
height: 200px;
box-sizing: border-box;
border-right: 5px solid red;
}
img {
max-width: 100%;
height: 100%}
.slick-next, .slick-prev {
position: absolute;
left: -80px;
top: 0;
}
.slick-next {
left: auto;
right: -50px;
}
.slick-slider {
div {
&:focus {
outline: 0;
}
}
}
It's working for me.
Without having access to your code, I can't give you a definitive answer, but I can give it a go.
Let's assume your slider object has the class of .slider and each of your slides has a class of .slide.
Your slider is the parent and each slide is a child of the slider. When you use the following code snippet in your CSS file, you are targeting the last child in the slide array.
In your CSS file:
.slider .slide:last-child{
border-right: none;
}
The class names on your specific slider will differ so you should change them to the actual slider and slide classes used on your end.
I hope this makes sense. I'm new to StackOverflow and trying to help.
This is the solution with Jquery:
$('.slick-active').addClass('border-right').removeClass('border-right--no');
$('.slick-active:last').addClass('border-right--no');
$( ".slick-arrow" ).click(function() {
$('.slick-active').addClass('border-right').removeClass('border-right--no');
$('.slick-active:last').addClass('border-right--no');
});
<style>
.border-right {
border-right: 1px solid #000;
}
.border-right--no {
border-right: 0;
}
</style>
To remove border from the last image, you can use :last-child selector.
.slick-slide:last-child {
border-right: 0;
}
Demo: https://jsfiddle.net/g04jrd3n/
I've been trying to create expandable buttons exactly like the ones near the bottom of this site (http://mastermechanic.ca/services.php), but I've been having trouble figuring it out. I'm a beginner in JavaScript, so any help would be greatly appreciated.
HTML:
<button id="lol">Some long text</button>
CSS: #lol {color: white; font-size: 2em; background: yellow; border: 5px solid orange; border-radius: 3px; padding: 10px 20px}
try defining width for button...
see example JS Fiddle
#lol {color: white; font-size: 2em; background: yellow; border: 5px solid orange; border-radius: 3px; padding: 10px 20px; width: 50%;}
I have made the CSS you may need to have the exact button in the link below. I hope it helps. Cheer.
CSS:
.big {
background: #fb7303;
height: 100px;
width: 250px;
border: 5px solid #ffa500;
border-radius:10px;
color: white;
font-size: 20px;
}
HTML:
<button class="big">Schedule <br>Maintenance</button>
Fiddle link: http://jsfiddle.net/dHq74/3/
I didn't create a very detailed example, but this should set you on the right track. You can play around with it from here.
They use a combination of Jquery & Css, when the user clicks on the "Button" it adds the class "fullheight", and when the click it again, it adds a class "smallheight"
$( "#reveal-container" ).toggleClass("smallheight");
$( "#reveal-container" ).toggleClass("fullheight");
I DIDNT do this. Buy maybe you can still benefit from my example:
I just created a container DIV like they did, then use Jquery to slide it open and closed:
jQuery
$(".button").click(function () {
$button = $(this);
$content = $button.next();
$content.slideToggle(500, function () {
});
});
See FIDDLE for full example .
Hope this helps you. :)
So when user hover over div(#cart-quick-view) child(.cart_details_box) needs to slideDown, and to slideUp when mouse gets out of parent(#cart-quick-view). Problem with this code is that sometimes I get 2-3 extra bouncing when mouse is in area of child(.cart_details_box).
Fiddle: http://jsfiddle.net/Y9QLC/
HTML:
<div id="cart-quick-view">
<ul class="nav navbar-nav navbar-right">
<li>...</li>
</ul>
<div class="cart_details_box"></div>
</div>
CSS:
#cart-quick-view {
float: right;
position: relative;
border: 1px solid black;
}
.cart_details_box {
display: none;
position: absolute;
height: 200px;
width: 205px;
background-color: #F8F8F8;
border-radius: 5px;
border:1px solid #E7E7E7;
padding: 0px 3px 3px 3px;
top: 55px;
right: 0;
}
JS:
$(function() {
$('#cart-quick-view').hover(function() {
$('.cart_details_box').slideToggle('slow');
});
});
It is because of the queuing of animations when the mouse enter and leave the parent element quickly. You can use .stop(true, true) to clear the existing animations to fix it
$(function () {
$('#cart-quick-view').hover(function () {
$('.cart_details_box').stop(true, true).slideToggle('slow');
});
});
Demo: Fiddle
The stop() method is an option, but there is also a jQuery plugin available called hoverFlow that can fix the problem with a better looking transition.
I'm trying to set the width on a div to be auto. It works fine in firebugs command editor, but when I put it in the actual page it doesn't play.
This is the code I am using:
$('content').setStyle({width: "auto"});
When that is run from the firebug it works fine, but when in the js function in the page it won't work:
Hide Sidebar
<script type="text/javascript">
function hideSide() {
$('content').setStyle({width: "auto"});
$('main').hide(); // this works fine
}
</script>
Firebug console doesn't report any errors. I also tried wrapping it in Event.observe(window, 'load', function() {}); but that didn't work either.
Anyone know whats up with that?
Thanks for reading.
Requested CSS
#content { width: 75%; background-color: #fff; margin: 0px; border-right: 1px solid #ddd; padding: 6px 10px 10px 10px; z-index: 10; }
* html #content{ width: 75%; padding-left: 0; margin-top: 0px; padding: 6px 10px 10px 10px;}
html>body #content { min-height: 600px; }
* html body #content { height: 600px; } /* IE */
You can also see this link for the html and this link for the full css.
Sorry, I should mention the link there to the HTML source is the original, all I have done to it is add the link and script excerpt above (see here)
Are you putting the cart before the horse? i.e. is your JavaScript code executing BEFORE your HTML has been rendered in the page?
I am using the following sliding div script:
http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html
Currently, the slidetoggle function is activated when the .btn-slide button is clicked. This slides up the "panel" div.
Upon clicking the .btn-slide button a second time, the panel div is closed.
I am a complete newb at js, so any assistance would be appreciated. Here's what I am trying to do:
1) When the mouse moves over (as opposed to clicking) the .btn-slide class, i would like the panel to slide out.
2) Then, when the mouse moves out of either the .btn-slide or #panel, i would like the panel to close. (but if the mouse is over either one, the panel should stay open).
I was able to get it working to where the slidetoggle function would close either one, or the other, but not both.
Thank you in advance for the help.
Sincerely,
Mac
Here is the JS:
<script type="text/javascript">
jQuery(function($){
$(document).ready(function(){
$('.btn-slide').click(function() {
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
});
</script>
here is the HTML currently being used:
<div id="prod_nav_tab">
<div id="panel">
This is where stuff goes!
</div>
<p class="slide"><a class="btn-slide">Table of Contents</a></p>
</div>
I have played with the CSS to fit my particular web site and is as follows (the original js, html, css can be obtained from the link above).
div#prod_nav_tab {
width: 200px;
height: 31px;
overflow: hidden;
background-color:#F00;
float: left;
margin: 0px 0px 0px 75px;
}
a:focus {
outline: none;
}
#panel {
background-color:#F00;
width: 200px;
height: 200px;
display: none;
position: absolute;
bottom: 0px;
}
.slide {
margin: 0;
padding: 0;
/* border-top: solid 4px #422410; **Adds a line at top of slide button to distibuish it */
background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
background: #d8d8d8;
text-align: center;
width: 200px;
height: 31px;
padding: 0px 0px 0 0;
margin: 0 0 0 0;
display: block;
font: bold 12pt Arial, Helvetica, sans-serif;
color: #666;
text-decoration: none;
position: relative;
cursor: pointer;
/* background: url(images/white-arrow.gif) no-repeat right -50px; ** Controls Arrow up/down */
}
.active {
background-position: right 12px;
}
When you move away from the .btn-slide to the #panel it hides it now because it triggers the mouseleave event of the .btn-slide.
To prevent this you should do something like:
HTML:
<div id="trigger">
Slide down
<div id="panel">
Content of your panel
</div>
</div>
JQuery:
jQuery(function($) {
$(document).ready(function() {
$("#trigger").mouseenter(function() {
$("#panel").slideDown("slow");
$(this).addClass("active");
}).mouseleave(function() {
$("#panel").slideUp("slow");
$(this).removeClass("active");
});
});
});
Make sure in your CSS you then set the panel to be hidden from start...
div#panel {
display: none;
}