I wan to create a simple carousel that holds an image title and text. When I click the "next" span, it should display the next two <li>. But nothing happens when I do so.
<script type="text/javascript">
$(document).ready(function() {
$('#right').click(function() {
$('li').animate({
left: '-600px'
}, 500);
});
});
</script>
Fiddle
See this example.
This is a pure CSS issue. You need only to add position: relative; to your li, so you can effect the left property in your script.
.carousel-inner li {
display: inline;
float: left;
margin: 20px;
border: 1px solid #999;
padding: 25px;
border-radius: 20px;
position: relative; // Add this so setting a left position will work
}
Simply try adding that in Chrome Inspector and you'll see it works. Ciao!
Add position: relative to your .carousel-inner li.
Related
I'm trying to make a short pop up in my web app for when a user clicks on a code to copy it. The trouble I'm having is trying to figure out to make it not shift everything in the parent div.
The gif below is what currently happens after all my attempts and googling of trying to solve this problem. What I'm trying to get to happen is have that copied message bubble just appear to the top right of the span with the room code.
This fiddle is a stripped down version of the interaction. I've tried all the different display and positionings and I'm not really sure where to go from here. Thanks in advance to everyone.
https://jsfiddle.net/k6ey1duc/36/
.container {
background-color: #008afa;
width: fit-content;
margin: auto;
padding: 20px
}
.text {
display: inline;
}
.pop-up {
display: none;
background-color: #fe0c0d;
}
#show-hide {
display: block;
margin: auto;
}
<body>
<script>
$(document).ready(function() {
var x = false;
$('#show-hide').on('click', function() {
if (!x) {
$("#pop-up").css({
"backgroundColor": "#fe0c0d",
"display": "inline"
});
x = true;
} else {
$("#pop-up").hide();
x = false;
}
});
});
</script>
<div class='container'>
<p class='text'>
Hello there! <span>Here is a span.</span>
</p>
<div id='pop-up' class='pop-up'>
Here is a pop-up
</div>
<button id='show-hide'>
Click for pop up
</button>
</div>
</body>
Adding position: absolute; to .pop-up will prevent the container from making any space for the element which is what you are trying to prevent. Additionally, adding position: relative; to .container will give you freedom to position .pop-up anywhere relative to the container.
Another solution is replacing the display: none; display: inline; with visibility: visible; visibility: hidden;. The main difference between these two is that display will remove the entire element from the layout whereas visibility will only hide the element but retain the elements space. This will solve the resizing container problem but will not give you the advantages of stacking and positioning that position: absolute does.
.container {
position: relative;
background-color: #008afa;
width: fit-content;
margin: auto;
padding: 20px
}
.pop-up {
position: absolute;
display: none;
background-color: #fe0c0d;
}
Use position:relative and postion:absolute.
.container {
background-color: #008afa;
width: fit-content;
margin: auto;
padding: 20px;
position: relative;
}
.pop-up {
display: none;
background-color: #fe0c0d;
position: absolute;
left:100%;
width:inherit;
}
I try to have a sticky navbar with a dropdown-menu.
But the dropdown-menu is not showing.
I player around with this for too long now i guess.. and the biggest problem: in jsfiddle the dropdown-menu is now showing at all. However at my pc the dropdown-menu is showing as long as the 'sticky' class is not added, then becomes invisible, too.
Here in stackoverflow I read about overflow:hidden in the navbar causing the problem. Deleting that makes the dropdown-menu work but the navbar disappears.
-> dropdown-menu invisible
https://imgur.com/JYcswYq
-> navbar not shown
https://imgur.com/Gk5P6gN
I assume the error somewhere here but couldnt figure it out..
#navbar{
overflow: hidden;
font-size: 25px;
background-color: #333333;
}
main{
padding-top: 30px;
padding-bottom: 30px;
}
.dropdown-content {
right:0;
display: none;
position: absolute;
background-color: #333333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-top: 48px;
}
There you can find a reduced part of my code. Here the dropdown doesnt show at all. (at my pc it at least shows as long as the sticky-class isnt added)
https://jsfiddle.net/xncjazky/3/
Hopefully i can get any advice on how to make the dropdown-menu popup even with the sticky-navbar.
Thank you.
Remove the overflow:hidden as you found out yourself, and add a height or min-height property to the #navbar selector, like so:
#navbar {
//overflow: hidden;
font-size: 25px;
background-color: #333333;
min-height: 48px;
}
The problem occurs because of the use of floats in your navigation items.
So another way to solve the issue without setting a fixed height to the #navbar, is changing your navigation items from float:left to display:inline-block.
Like so:
#navbar {
//overflow: hidden;
font-size: 25px;
background-color: #333333;
}
.lnav{
//float: left;
//display: block;
display: inline-block;
padding: 10px;
text-align: center;
color: #d9d9d9;
text-decoration: none;
cursor: pointer;
}
Hope this helps.
Cheers, Jeroen.
I had the same problem and solved it by placing the navbar inside the "div" element with "position: sticky".
For example:
<div style="top: 0; position: -webkit-sticky; position: sticky">
<nav>
<!-- here goes the code of navbar -->
</nav>
</div>
Removing overflow: hidden; will cause the background color of the main navbar to disappear if you have the li elements set to float: left; or float: right;.
I managed to fix the issue of content not appearing by making the .dropdown-content div class position: sticky; with the ul.topnav element. Problem is, a new glitch arises as the dropdown list appears with the background color assigned to it, acting as it should, except for one thing. The background color of the topnav list comes down around the dropdown, making the whole list fatter instead of showing a simple lonely dropdown menu.
I've got an HTML-File.
As you can see, if you click on an image it opens a box below with some text. That works with jQuery. Is there a way to push the images under the box down?
So that the box never covers an image. Please note that it should be responsive.
Here's the fiddle:
That's the css:
#projekte {
list-style: none;
text-align: center;
width: 100%;
}
#projekte li {
display: inline-block;
margin: 10px 5px 10px 5px;
width: 300px;
}
#projekte img {cursor: pointer; width: 300px;}
.beschreibung {
background-color: #bec3c8;
display: none;
width: 100%;
left: 0;
position: absolute;
}
don't make the .beschreibung elements absolutely positioned, as this will take them out of the flow of the document. Change your css to:
.beschreibung {
background-color: #bec3c8;
display: none;
width: 100%;
}
Updated fiddle (with vertical-align:top as stated in comments)
You have to change position parameter to relative
.beschreibung {
background-color: #bec3c8;
display: none;
left: 0;
position: relative;
}
And using jQuery, you can set it's width, like:
jQuery(".beschreibung").width("desired width");
EXAMPLE FIDDLE
Also, you need to hide previous image description, like:-
$("div[id^='projekt']").hide();
You can change your CSS Class position: relative
.beschreibung {
background-color: #bec3c8;
display: none;
width: 100%;
left: 0;
position: relative;
}
So I just found an easy solution. I just put the .beschreibung in a wrap div and set the .beschreibung to 100% width. You can find the updatet fiddle here: https://jsfiddle.net/znt3npqa/9/
As you can see in this jsfiddle, when you click the menu button, the little triangle that points to the button is only shown after the animation has finished. I'd like the animation to start with the pseudo element and only then proceed to the drop-menu element. How can I accomplish this?
A solution doesn't necessarily have to use javascript, CSS3 will be most welcome, I'm not worried about compatibility issues.
You can try this - DEMO
.drop-menu {
display: none;
position: relative;
height: 60px;
top: -20px;
}
.drop-menu ul::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: -30px;
left: 30px;
border-width: 15px;
border-color: transparent transparent red transparent;
border-style: solid;
}
.drop-menu ul {
background-color: red;
position: relative;
top: 20px;
z-index: 999;
}
See http://jsfiddle.net/SZWmd/23/
The problem is that while sliding, the element must have overflow:hidden, but then the triangle is hidden too.
Then, you have to slide .drop-menu ul instead of .drop-menu. You could easily do
$('.drop-menu-button').click(function() {
$('.drop-menu').toggleClass('visible');
$('.drop-menu ul').slideToggle();
});
and use this selector:
.drop-menu.visible::before
But the problem is that when is sliding up, the triangle is hidden at the beginning.
Then, you need
$('.drop-menu-button').click(function() {
if($('.drop-menu').hasClass('visible')){
$('.drop-menu ul').slideUp('',function(){
$('.drop-menu').removeClass('visible');
});
}else{
$('.drop-menu').addClass('visible');
$('.drop-menu ul').slideDown();
}
});
Edit:
You can also use
$('.drop-menu-button').click(function() {
$('.drop-menu').addClass('visible');
$('.drop-menu ul').slideToggle('',function(){
if(!$(this).is(':visible')){
$('.drop-menu').removeClass('visible');
}
});
});
See it here: http://jsfiddle.net/SZWmd/31/
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;
}