unable to click span #id in div without page refresh - javascript

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.

Related

onclick behaves oddly - refreshes page instead of displaying content

Here is my code, shortened for ease of access;
HTML
<a onclick="showHideDiv('bio')" target='_self'>
bio
<div id="bio" class="shadowScreen" style="display: none;">
<p class="showBio">
Bio!
</p>
</div>
</a>
Javascript:
var curDiv;
function showHideDiv(id){
if (curDiv!==null){
document.getElementById(curDiv).style.display="none";
}
document.getElementById(id).style.display="inline";
curDiv=id;
}
CSS:
.shadowScreen{
-moz-box-shadow: 0 0 30px 5px;
-webkit-box-shadow: 0 0 30px 5px;
}
.showBio{
background-color: white;
position:fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
When the 'a' element is clicked "showDiv(div)" is supposed to send a function call to JS which alters "display:none;" to "display:inline;". The HTML will now have the 'div' element which has the class "shadowScreen" which darkens the entire screen. I then have a 'p' element which centers a box on the screen and displays "bio!". But, it's not doing that, and I can't figure out why naht. I'm not the greatest with the Netbeans debugger, so I can't tell exactly what it's saying ;-;
If you need further clarification, just ask! I'll be more than happy to help you help me.
You should remove target and add "#" to href param as suggested.
Bio
Regarding your javascript code, try to initialise your curDiv variable with null.
var curDiv = null;
I think its redirecting because of the a tag.
You should replace:
<a onclick="showHideDiv('bio')" target='_self'>
with
<a href="javascript:void(0);" onclick="showHideDiv('bio')" target='_self'>
Firstly, you'll need to give your anchor tag a href attribute to make it valid. I'd suggest using the ID of the div you're toggling - #bio - or simply just #.
Next, you need to prevent the default action of your anchor tag in order to stop it executing the link you used in the href attribute. To do so, you need to add the following line to the end of your JavaScript function:
return false;

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';

Iterate through paragraphs

I've been using javascript (with a very limited knowledge) to swap images but now I want to do it with text.
My question is, if I have 10 different paragraphs (link 1 shows paragraph 1, link 2 shows paragraph 2 etc), I don't understand where I can 'type' them. My images obviously link to a ready made file but I want my text to remain as text and I'm not sure how I assign this in either CSS or HTML etc.
CODE USED:
So far I have my CSS code to define my text content (that I want to change depending on the clicking) and my map content where I'm controlling the change in text:
#content
#content div {float:left;}
#content_map {width:595px; height: 595px; margin-bottom: 15px; margin-right:15px;}
#content_text {width:290px; height: 595px; margin-bottom: 15px;}
#content_profile {width:900px; height: 755px; margin-bottom: 15px;}
So my html so far for the map 'hotspots' are as an example:
<area shape="circle" coords="276,326,15" href="#" alt="Kinnloch" onclick="MM_swapImage('stboswells_01','','discover_kinnloch.png',1)"/>
<area shape="circle" coords="202,264,11" href="#" alt="Lochinver" onclick="MM_swapImage('stboswells_01','','discover_lochinver.png',1)"/>
...
etc
so basically I'm swapping images in the 'profile' div by the coordinates on the 'map' div and what i want to do is use these coordinates to also swop in text in my 'text' div so the first set of coords would change my text div to say 'Discover Kinnloch' and the second set of coordinates would change my text div to say 'Discover Lochinver' etc...
It almost sounds like you want expanding sections.
You could have the content already in the html hidden by CSS, and show it via javascript. Here's an example using jQuery.
<div class="container">
Header 1
<p class="container-body">This is a test.</p>
</div>
<div class="container">
Header 2
<p class="container-body">This is another test.</p>
</div>
Hidden by CSS:
.container-body {
display: none;
}
And toggled by the JavaScript:
$(".container a").click(function () {
$(".container-body", $(this).parent()).slideToggle();
});
Here's a quick fiddle showing it in action: http://jsfiddle.net/yv9QG/
Alternatively, if you're talking about swapping text in a target space it's only a few minor changes and you end up with something like this: http://jsfiddle.net/yv9QG/1/

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>

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

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.

Categories

Resources