Following is my js fiddle in which i tried to create a light out effect like the following website bankalhabib.com, The issue is that on hover on menu my rest of screen is not getting dim which i actually want and instead only my menu is getting dim.
Kindly let me know ow can i resolve this issue so i can achieve the same effect as above mentioned site?
Thanks,
http://jsfiddle.net/49Qvm/9/
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Num</li>
</ul>
$('li').hover(function(){
$(this).addClass('hovered');
},function(){
$(this).removeClass('hovered');
});
I think your best bet would be to create an element for the darken effect on the screen. When you hover over the ul element it will toggle the visibility of the darkening element.
You will need to be sure that the z-index value for the ul element is higher than the element that provides the darkening effect (Remember this! When setting z-index on an element you will need to be sure to set it's position CSS property to relative, fixed, or absolute).
Here's a fiddle: http://jsfiddle.net/49Qvm/28/
Try this javascript/css that utilizes z-index to create a focused effect.
CSS
.link {
z-index: 700;
list-style-type: none;
padding: 0.5em;
background: black;
display: inline-block;
cursor: pointer;
color: white;
}
.dim {
width: 100%;
height: 100%;
z-index: -6;
display: none;
content: "";
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
}
body {
background-color: orange;
}
jQuery
var $dim = $('.dim');
$('.link').hover(function(){
$dim.fadeIn(200);
}, function(){
$dim.fadeOut(200);
});
HTML
<div class="dim"></div>
<ul>
<div class="link"><li>Home</li></div>
<div class="link"><li>Home</li></div>
<div class="link"><li>Home</li></div>
<div class="link"><li>Home</li></div>
</ul>
Some text here
http://jsfiddle.net/49Qvm/33/
I think maybe this is a scoping issue. Inside the context of the function, "this" refers to the function not the li element. I used to run into a lot of problems related to this. The solution for my cases were to look into using closures to ensure you are adding the class to the correct html element.
Related
I have some dynamic user generated divs.
I'm trying to create a function so when the user hovers on one of the divs it highlights while the other divs get blurred.
Therefore I need to figure out how (if possible) I can change the hovered div with one style while changing all the others with another style.
The generated divs are simply spawn through php as a simple div looking like this:
<div class="usercontainer" id="usercontainer"> </div>
I have tried something like this to change the div the user hovers on. But I can't figure out how I at the same time can change all the others.
Do I need javascript for it? or can it be done with css alone?
.usercontainer:hover
{
background-color: red;
opacity: 1.0;
}
I am sharing with css approach only, though you can do it by adding a class at parent with javascript.
Disadvantage of this approach is you have to use !important to override child styles.
.children {
display: inline-block;
height: 100px;
width: 100px;
background-color: grey;
color: red;
font-size: 50px;
border: solid 1px yellow;
}
.parent:hover .children {
opacity: 0.2;
}
.children:hover {
opacity: 1 !important;
}
<div class="parent">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
</div>
I have a foreach loop which displays a list of items using relative and absolute positioning, and on the bottom I would like to add a button (which is at the bottom of the container), which when pressed, shows/hides the given information, pushing the button with itself. I've looked at a couple of stackoverflow questions which had basically the same problem, but I couldn't find a solution which would work in my case.
Here are the codes for the problem (since I've tried a couple solutions, the style positions might not be logical, if you see anything weird please let me know):
The view:
<ul class="events>
#foreach (var events in Model)
{
//absolute positioned div-s
<li>
<div class="eventActions">
<button class="toggleBet">Place bet</button>
#Html.ActionLink("Event details", "Details", "Event", new { eventId = events.Id }, null)
<div class="betContent">#Html.Partial("_BetPartial", new BetViewModel(events))</div>
</div>
</li>
</ul>
The styles:
.events > li .eventActions {
position: absolute;
bottom: 0;
right: 0;
font-size: 24px;
height: 200px;
}
.events > li .toggleBet {
display: inline-block;
}
.events > li .betContent {
background-color: green;
margin: 0;
max-height: 0;
overflow: hidden;
transition: max-height 1s;
}
.events > li .eventActions.open .betContent {
max-height: 300px;
}
The jQuery:
$(".toggleBet").on("click",function(e) {
$(this.parentNode).toggleClass("open");
});
Here is a fiddle which shows what I would like to achieve: http://jsfiddle.net/yeyene/fpPJz/3/ (credits to user yeyene, from this question)
And here is the picture of my project so far (I would like to extend the list items height, move the links lower and make them move up when clicked)
Thank you in advance!
I would suggest forgetting about the .slideToggle method and just using a CSS class on the parent container, then use the max-height property to toggle between open and closed (or just height if you already know exactly how big the container should be when opened).
Here's a simple fiddle showing how you can do this with "pure" CSS by just adding a class to a container: https://jsfiddle.net/8ea3drce/
For good measure, below is the code used in the above JS fiddle:
HTML
<div class="container">
<a class="trigger">Trigger</a>
<ol class="content">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</div>
CSS
.container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.container .trigger {
display: inline-block;
background-color: red;
color: white;
cursor: pointer;
padding: 1em;
}
.container .content {
background-color: lightblue;
margin: 0;
max-height: 0; // This suppresses the element's height.
overflow: hidden; // This keeps internal elements from being visible when height is suppressed.
transition: max-height .5s; // This animates the motion when max-height is released. This isn't usually perfect. The closer max-height comes to be with the actual height of the element, the better. Fixed heights might be ideal.
}
.container.open .content {
max-height: 300px; // This releases the element's height to be as large as it would naturally be, up to 500px.
}
Javascript/jQuery
$('.trigger').on('click', function(e) {
$(this.parentNode).toggleClass('open');
})
Using the idea of classtoggling as shown in Dom's answer, setting the absolute position's anchors correctly and deleting the interfering height attribute solved the problem!
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;
}
Update: Fixed and working. Thanks everyone for the help.
Hello I'm making a javascript/jQuery button that when its clicked, a Div appears (display: inline-block), and when its clicked again the Div goes back to display: none. Ideally I would want to animate the movement, but I really just want to get it working first.
My button...
<button> Menu Test </button>
My function (updated)...
<script>
$("button").click(function(){
$("#flexMenu").toggle("slow", function() {
});
});
</script>
The CSS for flexMenu...
#flexMenu {
/* display: inline-block;*/
position: fixed;
float: left;
background: #1f1f1f;
margin: 3.9em 0 0 0;
padding: .25em;
width: 15%;
height: 6em;
border: 2px solid #fff;
z-index: 100;
}
I'm really just to sure how to grab the display property of the ID and change it. I've done a hover function before using CSS ease-out to make divs grow in size when hovered and change class by using $(this).toggleClass(nameOfClass), but I have never tried just changing an element. The other questions like this didn't really fit just changing the display value. Thanks for any help.
you should use jquery :
$("button").click(function(){
$("#flexMenu").toggle();
});
Updated with the jQuery .on() method which allows you to bind specific events to that button (event listeners).
$("button").on('click', function () {
$('#flexMenu').toggle("slow");
});
Fiddle
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