showing floating div in a gridview - javascript

I have a gridview and when i mouse hover on a particular column, i am loading an external div(position:absolute) into that position.This i have done by calling a js function in the onmouseover event of the gridview cell(gvTestGrid.cells[1].attributes.add("onmouseover","loadDIV();")).
I am able to load the div properly on mouse hover, but the problem is my loaded div contains a dropdown and button inside it. when i try to move my mouse inside the div to click the button or select the dropdown list, the div moves away.This happens after i added
onmouseout event(gvTestGrid.cells[1].attributes.add("onmouseout","removeDIV();"))
without onmouse out event my div will remain loaded there on the gridview cell.Please help
i have done a small sample
<html>
<div id="divPopup" onmouseout="removeDIV(this,event);" style="display:none;width:100px;height:100px;color:Navy;border:2px;border-color:Red;border-style:solid;">
Yes its me
</div>
<table>
<tr><td>A</td></tr>
<tr><td>S</td></tr>
<tr><td onmouseover="loadDIV(event)" onmouseout="removeDIV(this,event);">D</td></tr>
<tr><td>E</td></tr>
</table>
</html>
<script language="javascript" type="text/javascript">
function loadDIV(evt)
{
var myWin = document.getElementById('divPopup');
myWin.style.position='absolute';
myWin.style.left = evt.x;
myWin.style.top = evt.y;
myWin.style.display='block';
}
function removeDIV(obj,evt)
{
var myWin = document.getElementById('divPopup');
myWin.style.display='none';
myWin.style.left = 0;
myWin.style.top = 0;
}
</script>
if you try to enter mouse into the div it will move away.Any solution for this please??

How about removing the div after you are done with the work in the DIV you have popped up? So you would close the DIV when you click the button in the DIV (Assuming it does work and should close afterward) or in a similar manner.

Set a small timeout for hiding the div and clear this timeout in the onmouseover handler for the div.

It seems like the onmouseout event should be attached to the div.

If you don't have Anchor tags in this content, may I suggest some CSS magic?
CSS here
a.MyCellPopup div.MyPopup {display:none;}
a.MycellPopup {position:relative;} /* Make pop up's position relative to the anchor tag */
a:hover.MyCellPopup div.MyPopup {display:block;position:absolute;top:10px;left:10px}
HTML Here
<a href="#" onclick="return false;" class="MyCellPopup">
<div class="MyPopup">POP UP STUFF without links (links won't work)</div>
</a>
I have an onclick="return false" so if they click on the cell, they won't be brought to the top of the page. The href needs to be in there or else IE won't recognize the hover. I got this idea from ZenGarden for how to do simple pop ups.
If this still doesn't work I highly recommend visiting the YUI library, they have a javascript widget for exactly this problem.

Related

JavaScript Run full A href command

I have a website where there is a side menu filled with links. On top of that are some Next and Prev buttons for the user to switch between the menus of links.
I want to change this so that the menu will automatically change after x amount of time.
I thought something like this would do it:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function delayer(){
window.location = "http://www.google.com" }
</script>
</head>
<body onLoad="setTimeout('delayer()', 1000)">
</body>
</html>
Basically, instead of opening google, I want the page to run the "Next" button which is represented by:
<div class="navBtns mar9 s3">
<span></span>
<span></span>
</div>
Any idea on how to do this? Thanks!!
If you'd like to "click" the next button, then you can do that programatically with JS.
var nextbutton = document.getElementsByClassName('next');
nextbutton.click();
Getting element by class like that only works on post-IE8 browsers.
<span></span>
This hyperlink does nothing by itself. Somewhere on the site, there is a javascript function bound to the click event of this link. You need to either trigger a click event on the link, or call the javascript directly.
Without seeing the rest of the javascript / knowing what frameworks are in use on the page, it's impossible to give a more precise answer.
-- EDIT --
Based on your comment, you may be able to do something along these lines:
<script type="text/javascript">
setTimeout(function() {
$('#page_HOME .slider .next').click();
}, 1000);
</script>
As long as those hyperlinks are contained inside the slider element, the above code will trigger a change in your side menu after 1000 milliseconds
You could find the HREF of the link you want based on the class name of the link, using plain old JS.
window.location = document.querySelector(<link class name>).getAttribute("href");
This will redirect the browser to whatever the href attribute is set to.
If you wanted to keep a function like you have, you could use this:
function delay(link, time) {
setTimeout(function() {
window.location = document.querySelector("." + linkClass).getAttribute("href");
}, time);
}
Then to use it, just say:
delay("next", 5000); // go to the href of the link with the class "next" after 5 seconds.

Scrolling effect on click on a image

I'm trying to make a scrolling effect to a menu. To be precise i want to click on a image and when i click it the menu to scroll down by 1 with a fade effect or what ever effect to the next link.
Ahhh...Like a windmill wheel if u understand what i mean.:)
And couldn't find any info.
Here is my code :
<div class=".img-fade"><img src="http://www.lahondafire.org/nest/Volunteer%20Manual/Signs%20and%20Forms/Arrow.gif" width="180" height="170"><BR>
When i click on the arrow the links below start scrolling down by 1 and contact to be top and about me to be to bottom...</div>
<div class="menu">
About me<BR>
Portofolio<Br>
Contact
</div>
http://jsfiddle.net/WCtQn/242/
So when i click on that arrow to move the links from top to bottom or bottom to top,dosen't matter.
Thank you.
You can try this method. It reorders the list elements when the arrow is clicked
$('.img-fade').click(function() {
var last = $('a')[0];
last.remove();
$('br')[0].remove();
$('.menu').append("<br> " + last['outerHTML']);
});
You should learn how to use javascript/jQuery and show us what you've tried so far and what you're having trouble with next time you post here
If you want something fancier you could look to do something similar to this example, though I'd add some .stop()s to remove some errors it has
I'm no jQuery pro but I've come up with something that is close to what you're looking for. I spiced it up with a fade effect. I also removed the <br> tags and set the links to display: block;. You could modify what I have to something similar to what #Zeaklous has posted to remove them along with the element and add them back in.
http://jsfiddle.net/WCtQn/248/
$('.img-fade').on('click', 'img', function(){
var firstItem = $('.menu a').first();
firstItem.fadeOut(2000, function() {
$(this).remove();
$('.menu').append(firstItem);
$('.menu a').last().fadeIn(2000);
});
});

nicescroll not scrolling when hidden div is shown

I'm trying to use nicescroll on my website and it's working everywhere except on one page where I have a hidden div. Basically, I have a link that when clicked displays some content that was hidden on the page before. The problem - after clicking the link and showing the content it overflows and is not visible and not scrollable. Nicescroll isn't working for some reason.
Both work on their own on the page - meaning - if I take out the nicescroll code and keep the show/hide div code then I can click on the link and the page will become longer and a regular scroll bar will appear and I can scroll down to the bottom of the content.
Conversely, if I take out the show/hide code (just making the content shown at the load of the page) and leave in the nicescroll code then the page will load as a long page and the nicescroll bar will show up and work just fine.
I just can't get them to work together. I assume it has something to do with the page not needing to be scrollable when it first loads and when nicescroll is originally called so it just says "I don't need to work for this page" and then gives up. So, I've tried copying what looks to me like the "nicescroll startup code"
<script>
$(document).ready(function() {
$("#right").niceScroll();
});
</script>
into the function that is called when the show/hide link is clicked hoping that would "restart" it but that didn't work either.
The show/hide functions looks like this:
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
with the actual div section of the page looking like this:
-Show Stuff
<div id="example" class="more">
<p>
"Stuff here"
</p>
<p><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">-Hide Stuff-</a></p>
</div>
Everything is wrapped in a div with id="right" which is why the nicescroll script applies it to #right (which, again, works fine when I don't have the show/hide functionality.)
Any ideas?
I don't know what it is the correct solution but works fine after my div shows up and I call method:
$("#myHiddenDiv").getNiceScroll().onResize();
First off all move the inline onclick to the docready. If nicescroll is attached to the #right container you can try the following:
// cache container:
var $right = $('#right');
// use .on() jquery on container:
$right.on('click', '.showLink', function(e){
e.preventDefault()
$right.find('#example').show();
// resize nicescroll
$right.getNiceScroll().show().resize();
}).on('click', '.hideLink',function(e){
e.preventDefault();
$right.find('#example').hide();
// also hide nicescroll:
$right.getNiceScroll.hide();
});

DIV with an onclick function and an image inside of it has a dead spot

I have a DIV with in image inside of it. There is a spot right before the image that does not fire the onclick function when clicked. The rest, including the image and the DIV fire the function when clicked. I have tried attaching the function to the image itself in addition to the DIV and this does not fix the problem. Anyone know what to do?
//this give all the divs the function
var ButtonNumber = document.querySelectorAll(".ButtonStyle");
for (var i = 0; i < ButtonNumber.length; i++) {
ButtonNumber[i].onmouseover = ChangeCursor;
ButtonNumber[i].onclick = ButtonsAddTogether;
ButtonNumber[i].onselectstart = function() {return false;}
}
This is the HTML
<div id="55" class="ButtonStyle"><img alt="1" class="Center" src="Buttons/7.png"></div>
Try setting the image and the div to have the same height. That or use an inline element rather than a block element such as an anchor tag
I have placed your code within jsfiddle: http://jsfiddle.net/BUwFP/1/
Please look at it and tell me if it works for you. I have just:
defined functions that were not defined (probably you just skipped them showing your code),
added borders to image and the div that contains it,
and everything looks fine - clicking the box etc. fires events. Do similar thing and check whether your box really is placed where you click or somehow it has been moved (probably by CSS styles or JS code). You probably already know, that you may use Firebug in Firefox, Developer Tools in Chrome or anything similar.

.slideDown() content below jumps (isn't fluid)

So I'm writing a simple page that I want to be able to slide some content down when a button is clicked. Unfortunately this also causes some issues with the button I have underneath the sliding content. When I click the first button to slide content down, it works fine. As soon as I click the 2nd button, it slides the first content up, and the 2nd down and causes some jumping with the button below.
$('#1G').live('click', function(){
$('#slv').slideUp('slow');
$('#gld').slideUp('slow');
$('#brz').slideToggle('slow');
});
$('#2G').live('click', function(){
$('#brz').slideUp('slow');
$('#gld').slideUp('slow');
$('#slv').slideToggle('slow');
});
$('#3G').live('click', function(){
$('#brz').slideUp('slow');
$('#slv').slideUp('slow');
$('#gld').slideToggle('slow');
});
This happens on what seems to be every animation of size.
Here's an example:
http://kod.singaming.net/hosting
I've tried adding a width on #brz #slv and #gld, and I've tried adding a height to each.
Is it some css property I have to set? Let me know if I need to explain anything else.
This new method uses one box called info into which the correct content is loaded using the .load() function.
alternative html:
<div id="info" class='pkg'></div>
<div id="button" class="clearfix">
alternative script:
$('#1G').live('click', function(){
if ($("#info").hasClass("1")) return false;
$('#info').removeClass("1 2 3").slideUp('slow', function() {
$(this).load('_packages/bronze.html')
}).slideToggle('slow').addClass("1");
});
$('#2G').live('click', function(){
if ($("#info").hasClass("2")) return false;
$('#info').removeClass("1 2 3").slideUp('slow', function() {
$(this).load('_packages/silver.html')
}).slideToggle('slow').addClass("2");
});
$('#3G').live('click', function(){
if ($("#info").hasClass("3")) return false;
$('#info').removeClass("1 2 3").slideUp('slow', function() {
$(this).load('_packages/gold.html')
}).slideToggle('slow').addClass("3");
});
css for style.css:
#info {
display: none;
overflow: hidden;
height: 120px;
}
some other script that changes:
$('#brz').load('_packages/bronze.html');
$('#slv').load('_packages/silver.html');
$('#gld').load('_packages/gold.html');
The above can all just go away.
EDIT
I added the code I mentioned in my comment to prevent the buttons from functioning if the click is on the currently selected item. It's probably not the most elegant solution but it works. I add the class 1, 2, or 3 depending on the item clicked, and remove all of them upon a click of a different one.
The issue here is that the 3 divs #brz, #slv, and #gld are not wrapped in a div that will prevent the button below from moving because it is always the same height regardless of the movement of the content inside of it.
try:
<div style="[some height]">
// your three content divs
<div id="brz"></div>
<div id="slv"></div>
<div id="gld"></div>
</div>
the [some height] should be equal to whatever height you need it to be so that it will not be affected by the changes of the content inside the div.

Categories