Simple jQuery fadeIn fadeOut animation - How to show / hide DIVS? - javascript

SCENARIO:
Have 2 links inside a list of ul, li: MY INFO and LOG IN
One link must show a box (with fadeIn animation ) with a form inside when used HOVER on the link.
Other link shows a button inside a box (with fadeIn animation) when you HOVER on the link.
The form must fadeOut when user MOUSEOUT of the link "LOG IN" OR mouseout of the form.
The box with button, must fadeOut when user MOUSEOUT of the link "MY INFO" OR mouseout the box.
PROBLEM (same for both):
The form disapears when MOUSEOUT link MY INFO.
The button inside the div disapears when MOUSEOUT link LOG IN.
NOTE:
1/The form MUST BE VISIBLE WHEN MOUSE IS ON THE LINK OR ON THE FORM
2/The box with button MUST BE VISIBLE WHEN MOUSE IS ON THE LINK OR ON BOX with button
REFERENCE:
check www.conforama.fr on the very-top of the screen, link is "Compte" with an icon, it has a class: "with-hover-menu" . When you mouseover it, the form appears. When you mouseout the link OR the form, the form disapears. I need the same but with fadeIn.
Right now you can look at the code below in this jsfiddle: http://jsfiddle.net/75HYL/19/ but it doesnt work at all. I don't know how to achieve this. Would like to understand and learn...!!
<ul class="links">
<li class="classA"><a><span>My info</span></a></li>
<li class="classB"><a><span>Log in</span></a></li>
</ul>
<div id="userInfo">USER MUST BE ABLE TO CLICK THE BUTTON BELOW, SO THIS BOX MUST STAY VISIBLE<br/>
<input type ="button" value="OKAY"/>
<div id="login" >
<div class="form">
<form>
<input type="textfield" value="enter your email"></input>
<input type="checkbox"><option>remember me? </option><input>
<input type="button" value="Click me"/>
</form>
</div>
</div>
</div>
<style>
.links li { display:inline-block;cursor:pointer; }
.links li { padding:0 4px 0 1px; }
.links li.classA {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;}
.links li.classB {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;}
.links li.classA span {}
.links li.classB span {}
.links li.classA:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;}
.links li.classB:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;}
.links li.classA a {color:#fff;text-transform:uppercase;background:#00aaff;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;}
.links li.classB a {color:#00aaff;text-transform:uppercase;background:orange;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;}
#login {display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;}
#userInfo{display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;}
</style>
<script>
$("li.classA").hover(function() {
$("#userInfo").fadeIn('fast').css('display', 'block');
});
$("#login, .classA").mouseleave(function() {
$("#userInfo").fadeOut('fast').css('display', 'none');
});
$("li.classB").hover(function() {
$("#login").fadeIn('fast').css('display', 'block');
});
$("#login, .classA").mouseleave(function() {
$("#login").fadeOut('fast').css('display', 'none');
});
</script>

This is what you want?
http://jsfiddle.net/WcUFe/3/
I've only altered the js, to be easier to see the differences. For an easier life the cssand/or html should be altered, and all the code could be put in a separate plugin, that will control the whole show.
Basically i use a timer to allow the user ~100ms to move the mouse from the LI element to the displayed container.... all the rest is cruft to maintain the state and to make sure we never have the 2 containers visible at any moment.

A bit like this? Cleaned up a few syntax errors and change logic a bit

Well your problem is that the mouse currently HAS to leave your links to get to the boxes. Therefore the boxes MUST dissapear for the functionality to work as you have stated above.
A few solutions come to mind (I'm not great with jQuery so there might be better options); 1 is to add a bool and some logic to say if the box has opened and then only listen for mouseout events on the box (rather than the link and the box). And another is to debounce the events so that there's a bit of a time delay before you listen for the mouseout event of the link.
looks like #AbstractChaos has cleared this up now, as I suspected there is a better option to my suggestions!
Hope this helps.

or
$("li.classA").hover(function() {
$("#login").css('display', 'none');
$("#userInfo").fadeIn('fast');
});
$("#userInfo").mouseleave(function() {
$("#userInfo").fadeOut('fast');
});
$("li.classB").hover(function() {
$("#userInfo").css('display', 'none');
$("#login").fadeIn('fast');
});
$("#login").mouseleave(function() {
$("#login").fadeOut('fast');
});

Try this:
http://jsfiddle.net/QR49h/
I moved the divs to be hidden/shown to inside the <li> elements:
<ul class="links">
<li class="classA"><a><span>My info</span></a>
<div id="userInfo">USER MUST BE ABLE TO CLICK THE BUTTON BELOW, SO THIS BOX MUST STAY VISIBLE
<br/>
<input type="button" value="OKAY" />
</div>
</li>
<li class="classB"><a><span>Log in</span></a>
<div id="login">
<div class="form">
<form>
<input type="textfield" value="enter your email" />
<input type="checkbox" />
<option>remember me?</option>
<input />
<input type="button" value="Click me" />
</form>
</div>
</div>
</li>
</ul>
I also fixed a bug in the js (ClassA vs ClassB) and fiddled the css slightly so the second <li> item can keep it's position when the first is expanded. Oh and fixed some element closing issues in the form div.

Related

Darken/color a selected element (content-box) and add a check-mark-icon AngularJS

My question is related I think to jquery, angularjs and bootstrap.
I am rendering information that is coming from the backend and is presented on the front end in the form of several boxes. I am trying to get an "element selection effect" that when someone clicks on one or more of the boxes the entire box gets darker (or preferably blue with some level of transparency) and an ok-checkmark appears on it. The element is actually a bootstrap Well with some content inside.
I currently have an onClick event that colors the background, but it is not enough. Unlike an image, that can be entirely darkened when changing the background color, with a well (or any content box) it just colors the background and the content is still visible. I also want to add that green checked-mark icon inside the box when clicked, but I do not know how to add elements on the fly after onClick event.
Here is my relevant pieces of code (simplified objects, no backend):
var app = angular.module('myApp', []);
app.controller('SelectCtrl', function($scope) {
$scope.collections = [
{text:'content collection1'},
{text:'content collection2'}];
$scope.selectBox = function(collection){
collection.isclicked =! collection.isclicked;
$("#well").click(function(){
if (collection.isclicked){
//$("div").append('<span class="glyphicon glyphicon-ok pull-right"></span>');
}
});
}
});
.well:hover{
cursor:pointer;
cursor:hand;
color: #555;
text-decoration: none;
background-color: #C0C0C0;
}
.well {
border-color:#8CC63F;
float:left;
margin-right: 20px;
}
.well-active {
background-color:#3399ff;
}
.well-active:hover {
background-color:#3399ff;
}
<div data-ng-controller="SelectCtrl">
<div data-ng-repeat="collection in collections" data-ng-init="collection.isclicked=false">
<div class="well" data-ng-click="selectBox(collection)" data-ng-class="{'well-active': collection.isclicked}">
<div>{{collection.text}}</div>
</div>
</div>
</div>
So as I mentioned, the way it works now is that the selected wells change their background color, but that's it. How do I darken/color the entire well, including the content, and how do I add an icon on top of that background (inside the well) after mouse-click?
You could do an ng-show/ng-hide in elements inside of the well div:
<div data-ng-controller="SelectCtrl">
<div data-ng-repeat="collection in collections" data-ng-init="collection.isclicked=false">
<div class="well" data-ng-click="selectBox(collection)" data-ng-class="{'well-active': collection.isclicked}">
<span ng-hide="collection.isClicked">{{collection.text}}</span>
<i ng-show="collection.isClicked" class="glyphicon glyphicon-ok"></i>
</div>
</div>
</div>
This will show the content if the collection is not checked, and a check mark if the collection is checked.

unable to click span #id in div without page refresh

I have the below HTML structure
<div style="position:relative; width:500px; top:50px; letter-spacing:3px; width:650px; margin:auto; font-size:16px;">
<span id ='Alist' style='cursor:pointer;'>A</span>
<span id ='Blist' style='cursor:pointer;'>B</span>
<span id='Clist' style='cursor:pointer;'>C</span>
<span id='Dlist' style='cursor:pointer;'>D</span>
<span id='Elist' style='cursor:pointer;'>E</span>
..
..
..
</div>
clicking on the respective alphabet would bring out a list of names.
Javascript code below
$(document).ready(function() {
$('#Alist').on('click', function() {$('#A').show();});
$('#Blist').on('click', function() {$('#B').show();});
$('#Clist').click(function() {$('#C').show();});
$('#Dlist').click(function() {$('#D').show();});
$('#Elist').click(function() {$('#E').show();});
});
I tried
.on / .click as you can see on #Alist and #Blist
When I click "A" none of the other alphabets are clickable. If I have to refresh the page to click the next alphabet.
What is wrong here?
Pls let me know if you require anything is not clear.
Elements #A, #B, etc. are floated or positioned. Because of higher z-index they are above links and links aren't clickable.

Hide specific div without css

If I have a page that inserts an unwanted div on every load, is there any way to hide it without using CSS? I don't have access to that div and it doesn't have an ID or a CLASS.
For example I don't want the browser to display the following div:
<div style="text-align: center; font-size: 14px; text-decoration: none;">Please click <a style="text-decoration: none !important;" target="_blank" href="http://www.website.com"><b>here</b></a></div>
I found a question and an answer for hiding a specific string of text, but it doesn't work with this.
You can try to select content inside the div by using attribute value. Href attribute inside your div is perfect to do this, and then just use jQuery .parent() method to select whole div.
$("a[href='http://www.website.com']").parent().css("display","none")
Here is the working example:
http://jsfiddle.net/waxtue0o/
There are some ways of identifying an element without it having an id or class. If you have jquery you can use more advanced selectors like mgibala said (although I would prefer to do it without scripting).
See http://www.w3schools.com/cssref/css_selectors.asp for information on selectors. Two examples below.
Fiddle: http://jsfiddle.net/o8oyd3e2/
HTML:
<body>
<div style="background-color='red';">
Spam spam spam
</div>
<div>
Some content
</div>
<div class="myContent">
Some content
</div>
<div style="background-color='red';">
Spam spam spam
</div>
</body>
CSS:
body div:first-child {
display:none;
}
body div.myContent + div {
display:none;
}
Or you can host your site somewhere else...
You can do
document.getElementsByTagName("div")[0].style.display = 'none';

how to get a span cover whole div

I am very new to web scripting. I have to cover up this defect asap that's why I am using patches instead of some permanent fix .
I got a defect that a tab get selected only when the lettering of it get selected.
<div id='ErrorDictionarySearch_3' onclick='tab_click("0");' class='tab' style='position:absolute;z-index:15;border:none;left:0px;background-color:transparent;width:75px;' >
<span style='position:absolute;text-align:left;width:100%'>Search</span>
</div>
There is an issue with z-index but fixing that create some further issues. So I got that the div is get selected when span is selected.
So how can I make whole span cover that div.
Update (from comment)
ok i will try to make it more clear to you as you can see there is an onclick event in that div so whenever you should click on that div some thing need to be loaded. but that tab got selected only when mouse cursor is taken over Search ie we can click only when mouse is on lettering
add display:inline-block; to the <span>
<div id='ErrorDictionarySearch_3' onclick='tab_click("0");' class='tab' style='position:absolute;z-index:15;left:0px;background-color:transparent;width:75px;border:1px solid blue;' >
<span style='text-align:left;width:100%;border:1px solid red;display:inline-block;'>Search</span>
</div>
I have added border:1px solid red; and border:1px solid blue; for reference
Demo: http://jsfiddle.net/dfJFV/
<div id='ErrorDictionarySearch_3' onclick='tab_click("0");' class='tab' style='position:absolute;z-index:15;border:none;left:0;background-color:transparent;width:75px;' >
<span style='position:absolute;text-align:left;width:100%;display:block;'>Search</span>
</div>
add display: block to the <span>

Control transition with JavaScript

I have made a drop down menu with CSS using the #nav:hover selector to activate the property and value transition:height
http://jsfiddle.net/bryank/WXAcm/
What I really want to happen:
when user clicks(as opposed to hover) the area activated by #nav:hover once the menu drops and stays dropped. Then if the same #nav:hover area is clicked again the menu contracts.
After some research, what I understand so far, I believe I need to use javascript. I know very little javascript beyond the most basic of basic fundamentals. Im am currently digging through all the relevant javascript I can find, and I think I have bits and pieces to the puzzle... but nothing functioning yet... anyone know a clear and concise way of making this happen ?
Here's a CSS only solution:
DEMO: http://jsfiddle.net/k7HqE/
HTML
<!-- This is what is clicked, you can rework it to wrap the #nav if want -->
<label for="toggler">CLICK ME</label>
<!-- Hidden checkbox that gets toggled when the `label` is clicked -->
<input id="toggler" type="checkbox">
<!-- Your unmodified nav -->
<div id="nav">
<!--logo_image--> <a class="bg" href="#"><img src="b&w_logo.jpeg" height="56" width="110" /></a>
<!---->
<div style="height:1em;"></div>
<div style="font-size:1.1em;"><b>Artists</b>
</div>
<div style="height:1em;"></div>
<!---- AND SO ON ---->
</div>
CSS
/* hide the input */
#toggler { display: none; }
/* transition based on input checked state */
input:checked + #nav {
height:39em;
}
I think I have something :
Javascript :
document.querySelector("#nav").onclick = function(evt){
var arClass = this.className.split(" ");
if(arClass.indexOf("active")>=0){
this.className = "";
} else {
this.className = "active";
}
};
NOTES
indexOf may not work in every browser (IE7 & IE8).
This function will replace all your classes on #nav.
CSS :
#nav:hover,#nav.active{
height:39em;
}
http://jsfiddle.net/JFjwJ/

Categories

Resources