I'm facing a difficulty to make the drop down list looks good as it has messed up with CSS
DEMO.HTML:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css">
<style>
li{
display: block;
}
</style>
</head>
<body>
<div id='wrap'>
<div id="clickable_div">MENU</div>
<div id="nav_menu">
<ul class="dropDown">
<li id="li_1"><img src="images/ori_12.png"></li>
<li id="li_2"><img src="images/ori_14.png"></li>
<li id="li_3"><img src="images/ori_15.png"></li>
<li id="li_4"><img src="images/ori_16.png"></li>
</ul>
</div>
</div>
</div>
</body>
<script>
$('#wrap').mouseover( function(){
$('#nav_menu').slideDown();
});
$('#wrap').mouseleave( function(){
$('#nav_menu').slideUp();
});
$('#nav_menu li img')
.mouseover(function () {
this.src = this.src.replace('/ori_', '/hover_');
})
.mouseout(function () {
this.src = this.src.replace('/hover_', '/ori_');
});
</script>
</html>
DEMO.CSS:
#clickable_div {
width: 166px;
background-color: #9c9c9c;
display: block;
}
#nav_menu {
width: 166px;
height: auto;
background-color: #CCC;
display: none
}
//*{padding:0;margin:0} This will achieve what I want but eventually all my other elements on the same page will have no padding and margin
#wrap {
width: 166px;
}
By copying the code, you will see the drop down menu has messed up. It can be fix by using *{padding:0;margin:0} but all the other elements on the same page will have no padding and margin which is definitely not the desired output. I've tried set padding and margin to 0 for each and every element such as #wrap, #nav_menu but none of them works.
Your issue is with the ul which by default takes some margin. You can reset it independently.
try add this
ul.dropDown{
margin:0px;
}
Fiddle
Plus the transition issue on your menu while hovered in and out quickily can be resolved using stop() and also note that pair event for mouseleave is mouseenter not mouseover So try
$('#wrap').mouseenter( function(){
$('#nav_menu').stop(true, true).slideDown();
}).mouseleave( function(){
$('#nav_menu').stop(true, true).slideUp();
});
or just
$('#wrap').on( 'mouseenter mouseleave', function(){
$('#nav_menu').stop(true, true).slideToggle();
});
Fiddle
When you use the asterisk (*) as as selector in CSS, you are selecting every element on the page! That is a lot to select. Fortunately, CSS provides a way to select specific elements only.
for example, all you want to select is the <ul> on the page, right? Follow this pattern for a selector: parent child{margin:0px;} To make this what you want you can do this: #nav_menu ul.dropDown{margin: 0px;}.
That should fix your problem!
Related
I'm trying to set up a side menu and having some trouble with the jQuery Toggle. Everything else seems to function fine. I did try for a about 2 hours before posting here, so been getting a little frustrated (seeing how this is pretty basic stuff). Any suggestions?
Below is the format and exact order of my page layout, I only added separator text ("The side menu", "Image I click..", etc.) to make reading/understanding easier. Any help would be greatly appreciated.
The side menu:
<div id="SideMenu" class="sidenav">
<img class="CloseBtn" src="./wht_menu.png" />
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
Image I click to open the menu:
<img class="OpenBtn" src="./blk_menu.png" />
The rest of my page:
<div id="main">
My main page content goes here...
</div>
My CSS & jQuery:
<!--Slider Menu-->
<script>
$(".OpenBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
</script>
<style>
#SideMenu{
width: 250px;
display: none;
}
</style>
You need to wrap the jQuery in this block (docs):
$( document ).ready(function() {
$(".OpenBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
});
Working example using your code:
http://codepen.io/anon/pen/xEaqqA
There is a possibility that jQuery not loaded on page at the time.
<script>
(function($){
$(document).ready(function(){
$(".OpenBtn, .CloseBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
});
})(jQuery);
</script>
Thanks for your help everyone! Although pivemi's answer was not the solution, a deeper review of his codepen link got things working, my doc wasn't calling on the jQuery library. Adding this to the top was my solution:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
Your CSS could look like this:
.menu {
position: fixed;
height: 100%;
width: 272px;
padding-bottom: 50px;
overflow: auto;
box-shadow: 0 0 10px 0 rgba(0,0,0,.75);
background-color: #fff;
z-index: 999;
display: none;}
And your jQuery script:
$(document).ready(function(){
$('.show-menu').click(function(){
fade_menu();
});
$('.menu-item').click(function(){
fade_menu();
});});});
function fade_menu(){
$('.menu').fadeToggle("fast");
}
I'm trying to load some links from a text file into a navigation menu using the jQuery AJAX load() method. It's working fine when it loads the links but it won't let me apply an active class for the current link. It applies all the other CSS for the links but not the active class. Am I missing anything?
My HTML/jQuery:
<!DOCTYPE html>
<html>
<head>
$(document).ready(function(){
$('#cat-1-button').click(function(){
$('#sec-nav-container').show();
$('#sec-nav-items').load('textfile.txt #cat-1-items');
return false;
});
$('.subCat').click(function() {
$('.subCat').removeClass('active');
$(this).addClass('active');
return false;
});
});
</head>
<body>
<div id="sec-nav-container>
<div id="sec-nav-items> </div>
</div>
<button type="button" id="cat-1-button"> Click Here </button>
</body>
</html>
Textfile:
<div id="cat-1-items">
cat1-sub1
cat1-sub2
cat1-sub3
cat1-sub4
cat1-sub5
cat1-sub6
cat1-sub7
</div>
CSS:
.active {
padding-bottom: 2px;
border-bottom: 10px solid #6b00b3;
}
You may need to add rule for pseudo-element :visited
.active,.active:visited {
padding-bottom: 2px;
border-bottom: 10px solid #6b00b3;
}
DEMO
__
Check also your html , for example, you have here some issues :
<div id="sec-nav-container"> instead of <div id="sec-nav-container>
<div id="sec-nav-items"> instead of <div id="sec-nav-items>
try this replace instead $('.subCat').click(function()...
$('#sec-nav-items').on( 'click', 'a.subCat', function(){
$('.subCat').removeClass('active');
$(this).addClass('active');
return false;
})
I want to have two sections on my webpage which can be dragged left or right of each other:
<style>
#sortableitem {
width: 100px;
height: 70px;
float:left;
list-style-type: none;
}
.content {
background:lightgrey;
}
.header {
background:grey;
}
<style>
<ul id='sortable'>
<li id='sortableitem'>
<div class='header'>ITEM 1</div>
<div class='content'>Content here</div>
</li>
<li id='sortableitem'>
<div class='header'>ITEM 2</div>
<div class='content'>Content here</div>
</li>
</ul>
<script>
$(document).ready(function () {
$("#sortable").sortable();
});
</script>
This is working here: http://jsfiddle.net/gTUSw/
However, I only want to be able to drag using the header section. I have content which I want to be selectable.
How do I get this to work so that I can drag via the header, but still have normal control over mouse events in the content area ?
You want to use the handle option, like:
$("#sortable").sortable({ handle: ".header" });
You can see a working example here: http://jsfiddle.net/gTUSw/1/ - you can also see a wealth of options on the full api documentation here.
Check the bottom for revised edition
Alright, here's the issue. I have a li with a div inside, and I'm trying to hover the li to get the div to slide up into view.
Here's the HTML:
<li id="one">
<div>
<h4>title</h4>
<p>description</p>
</div>
</li>
Right now I have this in my CSS:
#one div { display: none; }
And this for my JS:
$(document).ready(function() {
$('#one').hover(function() {
$('#one > div').css({ display : 'block' });
});
});
I know I could just used CSS psuedo :hover to make it pop up, but I thought if I wanted to to a slide effect then I might as well do it all in JS. The first problem is this isn't working :|. Once I get it to just show up I want to add a slide effect to it, and I'm not sure if this is the right way to approach doing that.
Thanks guys/gals
revised
New JavaScript
$(document).ready(function() {
$('#one').hover(function () {
$('#one > div').slideToggle();
});
});
This works! Although it comes down from the top, and I planned on having it come up from the bottom.
Part of the problem is that slideUp() in jQuery hides the selection and slideDown() shows the selection. To have an element slide up into view, you need to do your own .animate().
CSS:
#one {
overflow: hidden;
position: relative;
border: 1px solid gray;
height: 40px;
}
#one div {
position: absolute;
bottom: -100%;
}
jQuery:
$('#one').hover(
function() {
$(this).find('div').animate({
bottom: '0%'
}, 'fast' );
},function() {
$(this).find('div').animate({
bottom: '-100%'
},'fast');
}
);
jsFiddle: http://jsfiddle.net/blineberry/mrzqK/
what about using jQuery slideUp or fadeIn?
http://api.jquery.com/slideToggle/
http://api.jquery.com/slideDown/
http://api.jquery.com/slideUp/
This code works for me.
$(document).ready(function () {
$('#one').hover(function () {
$('#one > div').slideDown();
});
});
Needs a bit of tweeking to make it look nice but it does slide down.
edit
Here is a site describing how to use animate to do what you want.
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions
you may do something like this
$(div).show("slide", { direction: "down" }, 1000)
or even the animate property may solve your problems
more here
http://docs.jquery.com/UI/Effects/Slide
api.jquery.com/animate/
firstly you need to create a min-width and min-height or something because li there is currently nothing to hover over.(just something to make the li have a presence put a red border on it and you'll see what I'm talking about.)
secondly I think you want to slideDown()... I think slideUp() will make it dissapear right?
I added a bg color for demo purposes.
hears a little demo:
http://jsfiddle.net/R9A3G/
If you're looking for a specific animation you may have to do some css tricks along with jquery .animate().
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<style>#one div { display: none; }</style>
<head>
<title></title>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('#one').hover(function() {
$("#one").find("div").slideDown("slow");
});
$('#one').mouseout(function() {
$("#one").find("div").slideUp("slow");
});
});
</script>
<body>
<div>
<li id="one">
<div>
<h4>title</h4>
<p>description</p>
</div>
</li>
</div>
</body>
</html>
TRY THIS
I've got a small page with two links that load content into a div dependant upon which link is pressed.
Question is fairly obvious, i'd like to highlight the current content link with a different color and toggle the color according to which link is pressed.
I'm attempting to do this with my current function using the following however it isn't working:
Pretty simply question so i'm obviously being dumb. Any help would be much appreciated.
Thanks!
<script type="text/javascript">
function loadContent(id) {
$("#video").load("streams.php?o="+id+"");
$('active').removeClass('active');
$(this).addClass('active');
}
</script>
Full code:
<html>
<head>
<title>beam</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function loadContent(id) {
$("#video").load("streams.php?o="+id+"");
$('active').removeClass('active');
$(this).addClass('active');
}
</script>
<style>
* { margin:0; padding:0; }
img{ border-style:none; }
html { height: 100%; }
body { height: 100%; font-family: "Tahoma", "Arial", sans-serif; font-size:15px; font-weight: bold;}
a {
color:#fff;
text-decoration: none;
}
.active {
color:#00d2ff;
}
.container {
position:absolute;
background:url("images/video-bg.jpg") no-repeat;
width:520px;
height:576px;
}
#video {
position:relative;
background:#000;
top:275px;
left:55px;
width:400px;
height:222px;
}
#stream-controller {
position:relative;
left:55px;
top:285px;
width:200px;
}
</style>
</head>
<body onLoad="loadContent(1);">
<div id="fb-root"></div>
<div class="container">
<div id="video">
</div>
<div id="stream-controller">
<p>STREAM 1 | STREAM 2</p>
</div>
</div>
</body>
</html>
One issue is your selector for the active link:
$('active').removeClass('active');
should be:
$('.active').removeClass('active');
The other issue, though I haven't tested this yet, is that I don't believe using href="javascript:loadContent(1);" will set the value of this in the function to the appropriate a element. If you're working with jQuery, you'd be better off setting the handler with jQuery, and passing the variable through the tag, something like:
<a class="stream active" href="streams.php?o=1">STREAM 1</a>
with the jQuery code:
$(function() {
$('a.stream').click(function(e) {
var $this = $(this);
$("#video").load($this.attr('href'));
$('.active').removeClass('active');
$this.addClass('active');
// prevent default link click
e.preventDefault();
})
});
Why don't you just do it in CSS?
a {
color:#fff;
text-decoration: none;
}
a:active {
color:#00d2ff;
}
editing out a part of my solution : ninja'd and a much better one from nrabinowitz
To toggle the "active" class to the link pressed, I would do this:
var $a = $("a");
$a.click(function() {
$a.removeClass("active");
$(this).addClass("active");
});