I have toggle menu. The code is working fine, the problem is the first time there is a span inside the but when I click on the menu the span is missing. I'm using this span to show the down arrow. I need to wrap a span inside as shown as the below code on every click. Here is my code
<div class="col-sm-12 seach-blk">
#selectedProductType <span></span>
<div id='cssmenu'>
<ul>
<li>categoryName 1</span> </li>
<li>categoryName 2</span> </li>
</ul>
</div>
</div>
Jquery
$(document).ready(function () {
// Initially hide submenu
$('#cssmenu').hide();
$('#open-menu').click(function (e) {
//Prevent href
e.preventDefault();
// Toggle the menu item
$('#cssmenu').toggle();
});
});
CSS
.srch-btnnew span {
position: absolute;
right: 15px;
background: url(../images/down-arrownew.png) repeat-x;
width: 12px;
height: 9px;
top: 22px;
}
Thanks
You are using empty html <span></span> that's why the browser might be removing that. So try using <span> </span>
Or you could put some text in span and use font-size: 0; for that.
Also try e.stopPropagation() instead of e.preventDefault()
Your code is working fine. Not span removed when clicking a tag.
I have tested in jsfiddle find the below link
JSFIDDLE LINK
I m not sure ,maybe in your a tag need space like (' ') otherwise CSS is affecting your arrow path
CODE :
// Initially hide submenu
$('#cssmenu').hide();
$('#open-menu').click(function (e) {
//Prevent href
e.preventDefault();
// Toggle the menu item
$('#cssmenu').toggle();
});
The <span> element is not being removed. It is an inline element, and therefore width and height do not apply to it. You can change it to a block element by adding display: inline-block; to the styling.
.srch-btnnew span {
display: inline-block; /* <-- Add this to make it a block element */
position: absolute;
right: 15px;
background: url(../images/down-arrownew.png) repeat-x;
width: 12px;
height: 9px;
top: 22px;
}
Related
Is it possible to show a dropdown whenever you hover over some specific area on an image? For example, if my mouse is within 50,62 and 70,80. I already tried this with invisible boxes and divs, but the only way I could get them to overlay the image was with position properties, but they wouldn't stay in place if I reshaped or resized the screen. Any ideas?
Demo : http://jsfiddle.net/v8dp91jL/12/
The code is pretty self-explanatory.
Just two imp things:
Everything should be in %
the .dropdown is inside .hover-area so that when you move your mouse from .hover-area to .dropdown, .dropdown doesn't disappear because it is still technically inside .hover-area even tho it's visually not
You can add some hidden element (span) positioned on some specific area and it is going to trigger the hover:
HTML:
<div class="image-wrapper">
<span class="image-hover-trigger"></span>
<img src="..." >
<div class="dropdown"></div>
</div>
CSS:
.image-wrapper { position: relative; }
.image-hover-trigger { position: absolute; top: 20%; left: 20%; right: 20%; bottom: 20%; }
.dropdown { display: none; }
.image-hover-trigger:hover ~ .dropdown { display: block; }
I am working on a piece of legacy code for a table. In certain cells, I'm adding a notice icon. When you hover over the icon a <span> is made visible displaying some information. I would like to be able to make this <span> smart about its positioning but can't figure out a good method. I can statically position it but depending on which cell in the table it is in it gets lost against the edge of the page. I have done a JsFiddle here demonstrating the issue. Unfortunately, I am not allowed to use anything but HTML, CSS and vanilla JS.
The title attribute to most tags is pretty smart about its position. I have added a title to one of the cells in the table in the jsFiddle (cell containing "Hello"). Is there any way to make my span exhibit the same smart behaviour?
A pop-up can be added before any element by putting the popup html code inside a 'div' with 'position:absolute; overflow:visible; width:0; height:0'.
When these events: 'onmouseenter', 'onmouseleave' are fired on the element, just toggle the popup css attribute 'display' between 'none' and 'block' of the element.
Example on jsfiddle:
https://jsfiddle.net/johnlowvale/mfLhw266/
HTML and JS:
<div class="popup-holder">
<div class="popup" id="popup-box">Some content</div>
</div>
Some link
<script>
function show_popup() {
var e = $("#popup-box");
e.css("display", "block");
}
function hide_popup() {
var e = $("#popup-box");
e.css("display", "none");
}
</script>
CSS:
.popup-holder {
position: absolute;
overflow: visible;
width: 0;
height: 0;
}
.popup {
background-color: white;
border: 1px solid black;
padding: 10px;
border-radius: 10px;
position: relative;
top: 20px;
width: 300px;
display: none;
}
Guys I was trying to make a notification menu which dropdown on click event.I have make that with below code but I have a problem that I can't hide it back.I want to hide it by clicking on body and div itself.How can I do that?
My html part.
<li class="clicker" >
<a>Notification</a>
<div class="display_noti">
<ol>
<span>This is it :D</span><br>
<span>This is it :D</span><br>
<span>This is it :D</span><br>
</ol>
</div>
</li>
My css part
.display_noti
{
width: 400px;
height: fixed;
display:none;
background-color: black;
color: white;
position: absolute;
top: 40px;
z-index: 2;
padding: 5px;
}
My jquery part.
$('.clicker').on('click',function(){
if($('.display_noti').css("display","none")){
$('.display_noti').show();
}
});
I am trying with this jquery code too but when I keep this code show() function doesn't work.
$('body').on('click',function(){
$('.display_noti').css("display","none");
});
just make your js code as:
$('.clicker').on('click',function(){
$('.display_noti').toggle();
});
http://jsfiddle.net/jp42q7t8/5/
Update:
also, if you want you may consider change the cursor shape on the li element to show that it is clickable like this:
.clicker { cursor:pointer; }
Update2:
If you add this somehow you can make the <div class="display_noti"> disappear when you click on it i don't know why though but it fixes it:
$('.display_noti').on('click',function(){
$(this).css({'background':'black'}); //same background color of the inner div
});
// hide some divs when click on window
var actionwindowclick = function(e){
if (!$(".display_noti, .clicker").is(e.target) // if the target of the click isn't the container...
&& $(".display_noti , .clicker").has(e.target).length === 0) // ... nor a descendant of the container
{
$(".display_noti").hide();
}
}
$(window).on('click',function(e){
actionwindowclick (e);
});
$('.clicker').on('click',function(){
$(".display_noti").slideToggle();
});
Jsfiddle
$(document).click(function(e) {
$('.display_noti').hide();
});
$('.clicker').on('click', function(e) {
$('.display_noti').toggle();
e.stopPropagation();
});
$('.display_noti').click(function(e){
e.stopPropagation();
});
.display_noti {
width: 400px;
height: fixed;
display: none;
background-color: black;
color: white;
position: absolute;
top: 40px;
z-index: 2;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="clicker"> <a>Notification</a>
<div class="display_noti">
<ol> <span>This is it :D</span>
<br> <span>This is it :D</span>
<br> <span>This is it :D</span>
<br>
</ol>
</div>
</li>
I am trying to display a hidden div (with a class .details) whenever a mouse hover at an element .tags in a page. This is working but not as expected.
I want the mouse should be able to enter the displayed .details and should even be able to click on its contents as we have here in StackOverflow tags
but the moment the mouse leaves .tags everything disappears. How can I delay the appearance of .details and have it allow mouse to select
its content whenever a mouse hovers over .tags?
HTML code:
<div class = 'tags'>
<div class='details'>
<a href='a.html'> jQuery </a>
<a href='b.html'> PHP </a>
<a href='c.html'> MySQL </a>
<a href='d.html'> Ruby on Rails </a>
</div>
</div>
CSS code:
.details {
background-color: rgb(235,243,243);
border-radius: 7px;
padding: 3px;
width: 240px;
float: left;
position: relative;
margin-top: 5px;
font-weight: 400;
}
jQuery code:
$(document).ready(function(){
$('.details').hide();
$(document).on('mouseover', ".tags", function () {
var $this = $(this);
$this.find('.details').slideDown(100);
});
$(document).on('mouseleave', ".tags", function () {
var $this = $(this);
$this.find('.details').hide();
});
});
Thank you in advance.
Create jsfiddle for answer. The problem is in .parents('.tags'), because $this is already tabs element. And $this.parents('.tags') returns empty jQuery object.
Add this style to your page and see if this helps
.tags {
height: 100px;
width: 200px;
}
the reason is because the .tags div is so small. Even though the .details div populates the .tags div it doesn't force the size of the element to increase.
which is why it is so hard for you to navigate across the .details div
You are hiding the tag that you want to control the mouse over event for.
Also, look at this way of setting up the selector, it makes it far more readable:
$(".tags").on('mouseover', function () {
alert("hi");
});
http://jsfiddle.net/tVEkF/
I am using in-page link anchors to smooth scroll down my page. Everything works just fine and each link hovers to the appropriate image. However, I want the active section to have a different image to show the user where they are. I cant seem to get this to work with anything.
Here is my HTML
<div id="scrollnav">
<ul>
<li class="scrolldot"><span>1</span></li>
<li class="scrolldot"><span>2</span></li>
<li class="scrolldot"><span>3</span></li>
<li class="scrolldot"><span>4</span></li>
<li class="scrolldot"><span>5</span></li>
<li class="scrolldot"><span>6</span></li>
</ul>
</div>
Here is my CSS
#scrollnav { width: 75px; height: 150px; position: fixed; right: 0; top: 100px; z-index: 999999;}
#scrollnav ul li { height: 16px; width: 16px; padding: 0px 0px 7px 0px; }
span { text-indent: -99999px; }
.scrolldot a { display: block; height: 16px; width: 16px; background-image: url(../images/dots.png); background-repeat: no-repeat; background-position: -16px 0; }
.scrolldot a:hover { background-image: url(../images/dots.png); background-repeat: no-repeat; background-position: 0 0; }
.selected { background-color: red; }
This is an example of the section I would scroll to and would want active.
<section id="one">
<div id="mainimagewrapper">
<div class="image1">
<div class="image2">
<div class="970content">
<div id="textdiv">
<h1>This is headline.</h1>
<p>This would be a description if someone wanted to write stuff here. This would be a description if someone wanted to write stuff here. This would be a description if someone wanted to write stuff here.</p>
</div>
</div>
</div>
</div>
</div>
</section>
I think the easiest way to do this, without writing your own jQuery script, is to check out Twitter Bootstrap's "Scrollspy" plugin. I believe it provides the effect you're looking for with very little configuration.
Link: http://twitter.github.com/bootstrap/javascript.html#scrollspy
/* ORDER to define anchor pseudo classes */
a, a:link, a:visited { ... css ...}
a:hover, a:visited:hover {... css ...}
a:active,a.my-active {... css ...}
a:focus {... css ...}
This way you define styling for browser default actions on an anchor.
After that, you might need to trigger some behaviors with javascript (in case the browser misbehaves due to #hash in hyperlink).
Using a jQuery action to add some of your flavour, like .my-active toggled onClick won't help you if you 'reload' the page. You will have to deduce the #hash from the hyperlink, then treat it for your styling.
Simply use jQuery hashchange to get the #hash from hyperlink then trigger a class on your element in scope.
Otherwise, if you just need a plugin to scroll-to some place inside an opened page : http://demos.flesler.com/jquery/scrollTo/ or study jquery-joyride-feature-tour-plugin.
Carry on