Onmouseover on HTLML li tag - javascript

I'm new to asp.net (and to stack overflow :) ) and I want a hint element to be shown on onmouseover event of li tags. I don't know how to set the position of the hint element. My code is something like this:
<script language="javascript" type="text/javascript">
function onmouseoveragent(e) {
document.getElementById("agentVisit").style.display = "block";
document.getElementById("agentVisit").offsetLeft = e.offsetLeft; /*e.????*/
document.getElementById("agentVisit").offsetTop = e.offsetTop; /*e.????*/
};
</script>
<div class="node">
<div class="taxonomy"></div>
<div class="content">
<div id="contact-map">
<ul>
<li id="city1" onmouseover= "onmouseoveragent(this)">
<a "blabla">
<span class="hideme">city name</span>
</a>
<p class="hideme"> city name <strong class="tel">123456789</strong></p>
</li>
/*other list items*/
</ul>
</div>
<div class="hr">
</div>

Unless you need a very good looking design to show your hint, you can use
<li title="city name">
update:
Check if it helps:
http://jsfiddle.net/ysuw5/91/

Related

On click, find next element by class name

I have a mobile menu, and when the user clicks the span with the class of "open", the next footer-menu-accordion opens. However, it also opens when the user clicks on the anchor link "level-1" Men.
What I am trying to do right now, is when the user clicks Men I would like to use jquery to find the NEXT footer-menu-accordion and keep it as display:none (which is the parent div containing the level-2 anchor tags). I know I have to use jquery's next() or find() methods, but I'm not sure how to do it. Can anyone help me out?
function mobileMainNav() {
$('a.level-1.direct').click(function(e) {
window.location = $(this).attr('href');
});
}
mobileMainNav();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mobile-menu" class=" footer-menu-accordion ">
<div class="dropdown-container ">
<a class="level-1 direct">Men</a>
<span class="open">img</span>
</div>
<div class="footer-menu-accordion ">
<a class="level-2 "></a>
<ul></ul>
<a class="level-2 "></a>
<ul></ul>
<a class="level-2 "></a>
<ul></ul>
</div>
</div>
I wrote this so when I click on level-1, I am directed to the "mens" section of my website. This works fine, however when I clicik level-1 I do not want the next dropdown to open, which it currently does. So I know I need to add some more jquery into this function to do so, I'm just not sure how as I am new to jQuery. Thank you in advance!
I'm not sure if you want to get the nearest footer for your anchor tag with the class level-1 or not ... if so try this :
function mobileMainNav() {
$('a.level-1').click(function(e) {
var nearestFooter = $(this).parent().siblings('div.footer-menu-accordion');
console.log(nearestFooter[0]);
});
}
mobileMainNav();
<div id="mobile-menu" class="footer-menu-accordion">
<div class="dropdown-container">
<a class="level-1">Men</a>
<span class="open">img</span>
</div>
<div class="footer-menu-accordion">
<a class="level-2"></a>
<ul></ul>
<a class="level-2"></a>
<ul></ul>
<a class="level-2"></a>
<ul></ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
also you don't have element with the class (.direct)

Faster way to target same selector in a jQuery loop

I have an output page (that I can't control) that has a really bad format. I'm using jQuery to loop through the elements and reorganize them to meet design specs.
I'm compiling strings using code similar to that below, but I'm wondering if there's a way to make it run faster? As you can see, the .html() I'm sniffing out is in children of the same parent element.
$('.parent').each(function(){
var address = $('.cellInnerWrapper .row-content .address a .addressNumber', this).html() +
$('.cellInnerWrapper .row-content .address a .addressDirection', this).html() +
$('.cellInnerWrapper .row-content .address a .addressName', this).html();
});
This just seems incredibly slow and repetitive to me, but I'm not the best at JavaScript and jQuery and don't know how to simplify it / speed it up.
Here's the original HTML structure:
<div class="parent">
<div class="cellInnerWrapper">
<div class="rowContent">
<div class="address">
<a href="URL">
<span class="addressNumber">17080 </span>
<span class="addressDirection"></span>
<span class="addressName">Iron Springs Road</span>
</a>
</div>
</div>
</div>
</div>
You can do something like this:
$(document).ready(function() {
$('.parent').each(function(){
var address;
var a = $('.cellInnerWrapper .rowContent .address a');
address = a.find('.addressNumber').html()+a.find('.addressDirection')+a.find('.addressName').html();
});
});
I adjusted to your html structure. Don't forget to use document.ready event to make sure the html structure was loaded before the script is executed.
Hope it helps!
Here is a working demo. You can store your common element in a new object and then access all the required elements that way you won't have to navigate the DOM every time.
$('.parent').each(function(){
var anchor = $('.cellInnerWrapper .rowContent .address a');
var address = anchor.find('.addressNumber').html() +
anchor.find('.addressDirection').html() +
anchor.find('.addressName').html();
console.log(address);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="cellInnerWrapper">
<div class="rowContent">
<div class="address">
<a href="URL">
<span class="addressNumber">17080 </span>
<span class="addressDirection"></span>
<span class="addressName">Iron Springs Road</span>
</a>
</div>
</div>
</div>
</div>
$('.parent').each(function(){
var a=$('.cellInnerWrapper').find('div.address').children('a').html();
$('div.newaddress').html(a);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="cellInnerWrapper">
<div class="rowContent">
<div class="address">
<a href="URL">
<span class="addressNumber">17080 </span>
<span class="addressDirection"></span>
<span class="addressName">Iron Springs Road</span>
</a>
</div>
<div class="newaddress"></div>
</div>
</div>
</div>
try this one.

Create two object Highslide

I faced with problem. I create two objects in highslide at the same time, but one of them don't activated (I can't close or move him). Below I write example:
hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.outlineType = 'rounded-white';
function paint(id){
var element = document.getElementById('highslide-html_' + id);
var frame = hs.htmlExpand(element, { contentId: 'highslide-html_' + id });
return frame;
}
paint("id1");
paint("id2");
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://highslide.com/highslide/highslide.js.php?full=true"></script>
<link rel="stylesheet" type="text/css" href="http://highslide.com/highslide/highslide.css" />
<div class="highslide-html-content highslide-move" id="highslide-html_id1">
<div class="highslide-header">
<ul>
<li class="highslide-close">
Close
</li>
</ul>
</div>
<div class="highslide-body">
Panel 1
</div>
<div class="highslide-footer">
<div>
<span class="highslide-resize" title="Resize">
<span></span>
</span>
</div>
</div>
</div>
<div class="highslide-html-content highslide-move" id="highslide-html_id2">
<div class="highslide-header">
<ul>
<li class="highslide-close">
Close
</li>
</ul>
</div>
<div class="highslide-body">
Panel 2
</div>
<div class="highslide-footer">
<div>
<span class="highslide-resize" title="Resize">
<span></span>
</span>
</div>
</div>
</div>
It doesn't work only when I create two objects at once. If I place paint(...) into the onclick handler, I can create any number of objects, and they will all be interactive.
Maybe anybody can help me?
Ohh, I found a solution.
Necessary add hs.allowSimultaneousLoading = true;

Switch Content of Div onclick

I've got two divs - each with one image inside. If I click on the image inside the second div I want this image to become the content of the first div (like a gallery).
It's important that I don't replace the links inside the img tag, so document.IMG1name.src=document.IMG2name.src isn't a possibility.
I tried it with innerhtml, but it doesnt work:
<div id="container1">
<img src="blablabla">
</div>
<div id="container2"; onclick="document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="../funnycat.jpg">
</div>
mm... your code works fine, just close img tags and remove semicolon:
<div id="container1">
<img src="blablabla" />
</div>
<div id="container2" onclick="document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="https://www.google.es/logos/doodles/2013/holiday-series-2013-3-4504416610680832-hp.jpg" />
</div>
here you have a demo: http://jsfiddle.net/HLs86/
HTML
<div class="pricing_table" id="monthly">
<ul>
<li>Basic</li>
<li>Subscribe Now</li>
</ul>
<ul style="background-color:#CCCCCC;">
<h2>Monthly Plans</h2><a class='plansSwitch' href='#yearly'>Click here to switch to the "Yearly Plans"</a></ul>
</div>
<div class="pricing_table" id="yearly">
<ul>
<li>Basic</li>
<li>Subscribe Now</li>
</ul>
<ul style="background-color:#CCCCCC;">
<h2>Yearly Plans</h2><a class='plansSwitch' href='#monthly'>Click here to switch to the "Monthly Plans"</a></ul>
</div>
JS
var $plansHolders = $('#monthly, #yearly').hide();
$('#monthly').show();
$('.plansSwitch').click(function() {
var href = $(this).attr('href');
$plansHolders.hide();
$(href).show();
});
you just need to add javascript: on your onclick action like this
<div id="container1"></div>
<div id="container2" onclick="javascript:document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="http://i.imgur.com/0fS8dCsb.jpg"/>
</div>
there is example

.js show hide hidden div within hidden div

Thank you in advance for your help! It's my first post, wasn't sure about the formatting so I hope I've done it correctly.
I'd like to know if I can show/hide hidden Nested divs using the following script taken from http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../style/lyr_swap.htm:
<script type="text/javascript">
function swapLyr(num) {
idCount=0
while(document.getElementById("mydiv"+idCount)){
el=document.getElementById("mydiv"+idCount)
if(idCount != num){
el.style.display="none"
}
else{
el.style.display="block"
}
idCount++
}
}
</script>
<ul>
<li onclick="swapLyr(0)">Show Green</li>
<li onclick="swapLyr(1)">Show Yellow</li>
<li onclick="swapLyr(2)">Show Red</li>
<li onclick="swapLyr(3)">Show Blue</li>
</ul>
<div id="mydiv0" style="display:none;background-color:#00AA00;width:350px; height:260px">Green</div>
<div id="mydiv1" style="display:none;background-color:#AAAA00;width:350px; height:260px">Yellow</div>
<div id="mydiv2" style="display:none;background-color:#AA0000;width:350px; height:260px">Red</div>
<div id="mydiv3" style="display:none;background-color:#0000AA;width:350px; height:260px">Blue</div>
I would like to use something like:
<div id="mydiv3" style="display:none;background-color:#0000AA;width:350px; height:260px">Blue<br /><br />
<a href="#null" onclick="swapLyr(5)">Show Hidden Div within this Div</li>
<div id="mydiv5" style="display:none;background-color:#FFF;width:300px; height:210px">Hidden Div Within "Blue" div</div>
</div>
i see it know. use this:
<div id="mydiv3" style="background-color:#0000AA;width:350px; height:260px">Blue<br /><br />
Show Hidden Div within this Div
<div id="mydiv5" style="display:none;background-color:#FFF;width:300px; height:210px">Hidden Div Within "Blue" div</div>
</div>
<script>
function swapLyr(num) {
el=document.getElementById("mydiv"+num);
if(el.style.display=="none"){
el.style.display="block";
}else{
el.style.display="none";
}
}
</script>

Categories