I'm very new to jquery/javascript and I'm trying to make an animated dropdown box when I click onto a button within my navbar.
My code works within jsfiddle http://jsfiddle.net/SQHQ2/2898/
But when I try to implement this within my website and refresh the page, the div disappears completely. I used inspect element and it appears to change to "display:none". I've tried changing the div to a button but still no avail. I just want the button to work! lol
Please can someone show me where I'm going wrong?
This is my html:
<div class="col-md-4 right">
<ul id="user-bar">
<li><div class="btn-burger" id="userlinksbox"><span class="fa fa-bars"></span></div></li>
<li>My Account</li>
<li>Logout</li>
</ul>
</div>
<!----- USER LINKS BOX ----->
<div class="user-links-box">
<h1>Test</h1>
</div>
My CSS:
.user-links-box {
height: 400px;
width: 285px;
padding: 15px;
top:-400px;
right:0px;
position: absolute;
background-color: #111;
color: #fff;
text-align: center;
z-index: 4;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
And finally, the js I'm using:
$(document).ready(function(){
$("#userlinksbox").toggle(function(){
$('.user-links-box').animate({top:40},500);
},function(){
$('.user-links-box').animate({top:-400},500);
});
});
Try these changes :
HTML
<div class="user-links-box" style="display:none">
<h1>Test</h1>
</div>
CSS
.user-links-box {
height: 400px;
width: 285px;
padding: 15px;
top:40px; // CHANGED HERE
right:0px;
position: absolute;
background-color:#111;
color:#fff;
text-align: center;
z-index: 4;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
#userlinksbox { display: inline-block!important; }
JS
$(document).ready(function(){
$("#userlinksbox").click(function(){
$('.user-links-box').slideToggle();
});
});
Is it really #userlinksbox?
Your fiddle tells me #user-links-box
try this
$(document).ready(function(){
$("#userlinksbox").toggle(function(){
$('.user-links-box').css({'display':'block'});
$('.user-links-box').animate({top:40},500);
},function(){
$('.user-links-box').animate({top:-400},500);
});
});
How about placing the .css() function in #Vilvan's answer outside the .toggle() function?
$(document).ready(function(){
$("#userlinksbox").toggle(function(){
$('.user-links-box').animate({top:40},500);
},function(){
$('.user-links-box').animate({top:-400},500);
});
$('#userlinksbox').css({'display':'block'});
});
Related
i have some setup... where tool tip appears on hover... so i have to put tool tip and anchor tags in same div... tool tips pointer events set to none.. but i cant set pointer events of container div to none because then Hover event is not detected... but i want the underlying element below tool tip to be clickable... please help me out (if possible) without java script... i have set up the dummy scenario below... also including code pen link.... and yeah... positions are not changeable...in my case the underlying div is partially visible as shown in this code below.. and i want it to be clickable/ fire alert function... yeah if there is other way by changing composition of UN-ordered list.. and separating it from that container please let me know... but tool tip should be visible on hover on switch...
<html>
<head>
<style>
.menudescription{
float: left;
width: 150px;
height: 30px;
text-align: center;
background-color: #A1BA94;
margin: 20px 0px 0px 12px;
font-size: 20px;
line-height: 25px;
font-family: 'Kaushan Script', cursive;
color: white;
border: solid white 2px;
opacity: 0;
pointer-events: none;
}
ul li {
list-style-type:none
}
#menulist{
clear: both;
width: 230px;
height: 342px;
position: fixed;
right: 0;
top: 5%;
z-index: 1000;
}
.menulistitem{
clear: both;
height: 60px;
width: 60px;
float: right;
position: relative;
text-align: center;
vertical-align: middle;
background-color: #A1BA94;
margin: 2px;
padding-top: 4px;
}
.menulistitem:hover + .menudescription{
opacity: 1;
}
.underlyingdiv{
height:200px;
width:50px;
background-color:red;
position:relative;
float:right;
margin:20px 40px;
display:block;
}
</style>
</head>
<body>
<div id="navbar">
<ul id="menulist">
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li>
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li>
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li></ul>
</div>
<div class="underlyingdiv" onClick="myfunction()"></div>
<script>
function myfunction(){
alert("hello");
}
</script>
</body>
</html>
below is the code pen link...
http://codepen.io/theprash/pen/MKwWoN
Check this out
The red container is clickable and the tooltip is visible on hover.
Things I do:
Added position:relative to li.
Removed floats to divs inside lis added below css to .menudescription
position: absolute;
right: 100%;
top: 0;
This will help to position the tooltip relative to li
Override the width of #menulist to 60px and remove padding-left for the same. This will make sure that the red container is clickable.
Working Code pen
Please can someone assist, looks like such a simple function but for the life of me I cannot get it right. I need to have it inserted on my wordpress website.
Its a simple show hide content when mouseover on another block. Exactly like the one on this site, under the heading Solutions. I mouseover the title block and I see the content on the right hand side.
Is there a very simple way to this? Or even a WP plugin?
Thanks in advance.
I just created a simple solution. Check this below or https://jsfiddle.net/oneness/Lotaaxdh/
JS/CSS/HTML RESPECTIVELY
$( ".science" ).mouseover(function() {
$( "#social_display" ).hide("fast");
$( "#science_display" ).show("slow");
});
$( ".social" ).mouseover(function() {
$( "#science_display" ).hide("fast");
$( "#social_display" ).show("slow");
});
.box{
background-color: #37545c;
border:1px solid #000000;
padding:5px 5px 5px 5px;
color:#ffffff;
}
.right{
float:right;
}
.left{
float:left;
}
#science_display, #social_display {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='left'>
<div class="box science">Science</div><br>
<div class="box social">Social</div>
</div>
<div class='right'>
<div id='science_display'>This is the story behind Science</div>
<div id='social_display'>Social button story and other details </div>
</div>
I made this for you, but if you have no knowlegde of coding it might be hard to add alone.
https://jsfiddle.net/Skaadel/5s7symfe/
Jquery
$('#puppies').hover(function() {
$('.display').html('Puppies'); /** Change ('Puppies') to change text displayed when hover**/
});
$('#kittens').hover(function() {
$('.display').html('Kittens');/** Change ('Kittens') to change text displayed when hover**/
});
$('#aardvark').hover(function() {
$('.display').html('Aardvark');
/** Change ('Aardvark') to change text displayed when hover**/
});
HTML
<div class="container">
<div id ="kittens"></div>
<div id ="aardvark"></div>
<div id ="puppies"></div>
</div>
<br>
<div class="display">Hover on the picture for description.</div>
CSS
body { background: black; }
.display {
font:20pt 'Georgia';
height:50px;
width: 759px;
text-align:center;
background-color: white;
border: 1px solid black;
margin: auto;
}
.container{
height: 250px;
width: 759px;
margin: auto;
border: 3px solid black;
}
#kittens{
background-image: url(http://goo.gl/Ktu3u0);
height: 250px;
width: 250px;
display: inline-block;
}
#aardvark{
background-image: url(http://goo.gl/qQUUff);
height: 250px;
width: 250px;
display: inline-block;
}
#puppies{
background-image: url(http://goo.gl/6gvDn2);
height: 250px;
width: 250px;
display: inline-block;
}
I made it fast, so the design is not that pretty.
I've build a tab Container with multiple Tabs and corresponding content, which is only visible if the corresponding Tab is clicked. This works great so far, but I have tried to add two buttons which will navigate to the next and previous tab and I don't know how to achieve this.
You'll find below what I've done so far. I think it's no so good JS code, maybe someone can give me also some hint's to improve it.
Thanks in advance for your help
$(document).ready(function(){
// hide all contents accept from the first div
$('.tabContent div:not(:first)').toggle();
// hide the previous button
$('.previous').hide();
$('.tabs li').click(function () {
if($(this).is(':last-child')){
$('.next').hide();
}else{
$('.next').show();
}
if($(this).is(':first-child')){
$('.previous').hide();
}else{
$('.previous').show();
}
var position = $(this).position();
var corresponding = $(this).data("id");
// scroll to clicked tab with a little gap left to show previous tabs
scroll = $('.tabs').scrollLeft();
$('.tabs').animate({'scrollLeft': scroll+position.left-30},200);
// hide all content divs
$('.tabContent div').hide();
// show content of corresponding tab
$('div.' + corresponding).toggle();
// remove active class from currently not active tabs
$('.tabs li').removeClass('active');
// add active class to clicked tab
$(this).addClass('active');
});
});
body{
background-color: gray;
}
*{
box-sizing: border-box;
}
.contentWrapper{
width: 350px;
margin: 0 auto;
position: relative;
}
.tabsWrapper{
width: 100%;
height: 24px;
overflow: hidden;
position: relative;
}
.tabs{
margin: 0;
padding: 0;
position: absolute;
top: 0;
bottom: -25px;
left: 0;
right: 0;
white-space: nowrap;
overflow: auto;
}
.tabs li{
display: inline-block;
background-color: #ccc;
padding: 3px 8px;
cursor: pointer;
}
.tabs li.active{
background-color: white;
}
.next, .previous{
position: absolute;
padding: 2px 4px;
top: 0;
background-color: white;
}
.next{
right: -25px;
}
.previous{
left: -25px;
}
.tabContent{
width: 100%;
background-color: white;
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contentWrapper">
<div class="tabsWrapper">
<ul class="tabs">
<li data-id="contentOne" class="active">CSS</li>
<li data-id="contentTwo">HTML, HTML, HTML</li>
<li data-id="contentThree">JS and jQuery</li>
<li data-id="contentFour">one more tab</li>
<li data-id="contentFive">another tab</li>
<li data-id="contentSix">the last tab</li>
</ul>
</div>
<a class="next">></a>
<a class="previous"><</a>
<div class="tabContent">
<div class="contentOne">
<p>this is the CSS tab Content</p>
next
</div>
<div class="contentTwo">
<p>this is the HTML tab Content<br><br>1</p>
next
</div>
<div class="contentThree">
<p>this is the JS tab Content</p>
next
</div>
<div class="contentFour">
<p>this is the sample Content</p>
next
</div>
<div class="contentFive">
<p>this is more sample Content</p>
next
</div>
<div class="contentSix">
<p>this is more than more sample Content</p>
next
</div>
</div>
</div>
You can use trigger('click') to programmatically click the tab you want. This way all the code written for tab change will automatically get executed. For example see the following code:
$('div a').click(function(e){
e.preventDefault();
$('li.active').next('li').trigger('click');
});
See JsFiddle here
there is a tool bar in the left of my page, the width of the tool bar is 35px, the main content panel is in the right of my page and has CSS float:right I want to set the width of main content panel with 100%-35px, so that the tool bar can be displayed, how can I achieve this effect, many thanks.
You can use calc(). But i'm not sure about browser compatibility. So try jquery solution.
Layout should be like this.
<div style="width: 100%">
<div id="toolbar" style="display: inline-block; width: 35px"></div>
<div id="main-content" style="display: inline-block"></div>
<div>
in jquery:
$("#main-content").width($(window).width() - 35);
if there is padding or margin detect them also.
It's convenient to do this by using absolute position. It doesn't need to use javaScript and it handle screen size change event correctly.
the css like bellow:
.toolbar {
position: absolute;
width: 35px;
}
.content {
position: absolute;
left: 35px;
right: 0px;
}
see the demo in jsFiddle.
Pure CSS based approach:
css:
.container {
padding-left: 50px;
border: 1px solid red;
}
.toolbar {
width: 35px;
margin-left: -50px;
padding: 0 5px;
list-style-type: none;
}
.main {
width: 100%;
}
.col {
display: inline-block;
vertical-align: top;
}
html:
<div class="container">
<ul class="toolbar col">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
<div class="main col">
<p>This is the place holder for Main Content</p>
</div>
</div>
http://cdpn.io/hlfFG
Sounds like this can easily be done with CSS.
#main-content {
width: 100%;
margin-right: 35px;
}
I was able to use JSfiddle to create a appendTo event. By clicking on the image, I am able to get the caption for those images printed in a list in another div. But what if i wanted it to be appended to another page into a form?
Also, how do i remove an item after its been added? The code that i currently have allows me to appendTo, but I have no idea how to undo this event... any suggestions?
Here is JS fiddle: http://jsfiddle.net/jhyqt5/cBsqN/20/
and the Code:
HTML
<div class="wrapper">
<div class="caption">Blueberry</div>
<img src="https://scontent-a-pao.xx.fbcdn.net/hphotos-prn2/1394351_529524313783586_609777864_n.jpg" class="img-circle">
</div>
<div class="wrapper">
<div class="caption">Walnuts</div>
<img src="https://scontent-b-pao.xx.fbcdn.net/hphotos-ash4/1377244_529524413783576_249384396_n.jpg" class="img-circle">
</div>
<div class="wrapper">
<div class="caption">Craisins</div>
<img src="https://scontent-b-pao.xx.fbcdn.net/hphotos-frc3/1378714_529524353783582_129148654_n.jpg" class="img-circle">
</div>
<br>
<br>
<div class="foodlist">
</div>
CSS
.img-circle {
border-radius: 50%;
height: 140px;
width: 140px;
}
.wrapper {
position: relative;
}
.caption {
background-color: black;
opacity: .7;
text-align: center;
line-height: 120px;
color: white;
position: absolute;
display: none;
border-radius: 50%;
width: 140px;
height: 140px;
}
.wrapper:hover .caption {
display: block;
}
.wrapper.active .caption {
display: block;
opacity: .8;
background: #38ACD5;
}
JS
$('.wrapper').on('click', function () {
$(this).toggleClass('active');
var caption = $(this).find(".caption").text();
$("<li>" + caption + "</li>").appendTo("div.foodlist");
});
Bottomline:
1) appendTo and Undo function
2) appendTo a form on a another page
Thanks :)
You can't modify a page that will be loaded sometime in the future. That page doesn't exist yet.
All you can do is to set some state (in browser cookie, browser local storage or on the server) that the javascript code in that other page can examine and then modify that other page when it is loaded.