I am looking to create a JQuery page with a hover over effect. when it hovers over the top left quadrant of the page, a div must be filled with text, and different text for the other three quadrants over the page.
I am new to JQuery, but I do have a programming background of some sort so I do know how to navigate through the language. I am going to use the css properties to change the text in the div's as they will be different divs, displayed in the same spot (so I will alter their visibility/display) or should I rather go with JQuery's .hide() and .show() methods?
My main question, is how do I set up the page so that JQuery picks up when the mouse is in the top left quadrant, top right quadrant, bottom left quadrant or bottom right quadrant of the screen?
Thanks in advance, any advice would be greatly appreciated.
You can bind on mousemove event and compare cursor position with window width and height. Something like this http://jsfiddle.net/tarabyte/DUJQ4
<div id="topleft" class="message">Top Left</div>
<div id="topright" class="message">Top Right</div>
<div id="bottomleft" class="message">Bottom Left</div>
<div id="bottomright" class="message">Bottom Right</div>
$(function(){
var current; //will save current quadrant here
$(document).mousemove(function(ev){
var left = ev.pageX, top = ev.pageY, //cursor coordinats
win = $(window),
width = win.width(), height = win.height(), horizontal, vertical, id;
horizontal = (left < width/2) ? "left": "right";
vertical = (top < height/2) ? "top": "bottom";
id = vertical + horizontal;
if(id == current) { //not changed
return;
}
current = id;
$(".message").hide(); //hide all messages
$("#" + id).show(); //show only one with corrent id.
});
})
If you don't have a restriction about wich browser will run your website, I suggest that you use css instead jquery
see this example
UPDATE
BUT, if you want to do this with jquery you need to use the $('.mainMenu').hover(function hoverIn(), function hoverOut()). Then inside each function parameter you need to change the style properties to change the display value to none(hiden) or block(visible)
See this example
Related
How can I set up 2 html div tags, one float left (actually containing the Google Earth Plugin), one float right (initially hidden)?
The content of the right div will be dynamically populated with a number of different dialogs and then made visible. Once visible it's width can expand further.
I need the left div to shrink to accommodate the right div when ever the right div toggles from invisible to visible or whenever it's width adjusts.
Just adjust the width of your left div with some javascript?
Depending on your layout you can use % or px or whatever you prefer.
Here´s a really simple example showing how to do it with a percentage based layout:
HTML
<div class="l">LEFT</div>
<div clasS="r">RIGHT</div>
<br>
<a>TOGGLE R</a>
JS
(function($) {
var visible = false;
$("a").click(function(event) {
event.preventDefault();
$("div.r").toggle();
$("div.l").css("width", 50+(visible*50)+"%");
visible = !visible;
});
})(jQuery);
Try it out in the fiddle here: http://jsfiddle.net/ZbzL5/
Here an example:
You have to make an event when the new div is get visible and change the width of the left div.
JS:
$(function(){
$("button").click(function(){
var precSize = $("#width_input").val();
var parentWidth = $(".wrapper").width();
var leftOldSize = $(".left").width();
var newSize = parentWidth * ( (100 - parseInt(precSize)) / 100);
$(".left").width(newSize);
$(".right").width( $(".right").width() + (leftOldSize - newSize));
});
});
jsFiddle
basically to make google earth aware that div size changed you need
google.maps.event.trigger(map, "resize");
reference : so g map resize
But in your scenarion you can also trigger the abovein the resize event of the right div using jquery. $('div').bind('resize', function(){})
Let me start of by saying, I'm just now learning JS and Jquery, so my knowledge is very limited.
I've been looking around for 2 days now, and tried all sorts of combinations. But I just can't get this to work.
Below is an example of the layout
I'm looking for a way to trigger an event when div 1 is X px from the top of the screen. Or when div 1 collides with div 2.
What I'm trying to accomplish is to change the css of div 2 (the fixed menu) when div 1 is (in this case) 100px from the top of screen (browser window). Alternatively, when div1 passes div2 (I'm using responsive design, so the fixed height from top might become a problem on smaller screens right? Seeing as the header for example won't be there on a hand held.). So maybe collision detection is better here? Would really appreciate some thoughts and input on this matter.
Another issue is, div2 has to revert back to is previous css once div1 passes it (going back (beyond the 100px)).
This is what I have but it has no effect
$(document).ready(function() {
var content = $('#div1');
var top = $('#div2');
$(window).on('scroll', function() {
if(content.offset().top <= 100) {
top.css({'opacity': 0.8});
}else{
top.css({'opacity': 1});
}
});
});
I am not sure of the reason but $("#content").offset().top was giving a constant value on console. So I added window.scrollTOp() to check its distance from top, here is how it works,
$(document).ready(function() {
var top = $("#menu");
$(window).on('scroll', function(){
if(($('#content').offset().top - $(window).scrollTop()) <= 100){
top.css({'opacity': 0.4});
}else{
top.css({'opacity': 1});
}
});
});
And DEMO JSFIDDLE....
How can I assign absolute left 0px OR absolute right 0px depending on if the absolute positioned div will go outside of its container div.
I guess an easy example of what I mean is: right click in your browser, see it has that menu position to the right of where you click, well not go all the way to the right of the page, instead of going outside of the page, it stays inside of it so it's still visible.
example: (Hover over boxes)
http://jsfiddle.net/ueSNQ/1/
It sounds like you'll need to use script to work the "depending on if the absolute positioned div will go outside of its container div" bit, IE supports css expressions but you're probably after a cross browser solution.
that said it should be a simple matter of something like this
function isOverflow(parent, child){
var left = 0;
var op = child;
while(op && op != parent){
left += op.offsetLeft;
op = op.offsetParent;
}
return ((left + child.offsetWidth) > parent.offsetWidth);
}
function getHoverHandler(parent, child){
return function(){
if(isOverflow(parent, child)){
child.style.marginLeft = 'auto';
child.style.right = '0px';
child.style.left = '';
}
}
}
function attach(o,e,f){
if(o.addEventListener){
o.addEventListener(e, f, false);
}else if(o.attachEvent){
o.attachEvent('on'+e,f);
}
}
var yellowElement = document.getElementsByTagName('UL')[0];
var list= document.getElementsByTagName('LI');
for(var i = 0; i < list.length; i++){
var element = list[i];
var tip = element.getElementsByTagName('DIV')[0];
attach(element, 'mouseover', getHoverHandler(yellowElement,tip));
}
Well Friend,
Try the following steps
1. You have a container div and on right clicking on it you will need to display a div for example say div with list of menus.
2. Have the left position of the container div in a variable **contLeft** and width of the container in another variable **contWidth**
3. Assign the oncontextmenu event handler on the container div.
4. In the event handler function take the mouse x postion in a variable **mosX** and mouse y position in a variable **mosY** and you have to fix the top position of the div to be displayed as mosY and the left as mosX.
5. In order to maintain the div within the container you have to calculate the container's screen occupation as **totPos = (contLeft + contWidth)**
6. Calculate the screen occupation of the menu div as **posMenu = (mosX + width of the div)**
7. If the totPos greater than or equal to posMenu display the menu in the same top and left postion using the values of mosY and mosX
8. Else place the menu in position top = mosY and left = (mosX - width of menu div)
Hope this would solve your problem.
Well first of all if the container div has a position set than position: absolute, right: 0px or left: 0px will be positioned relatively to the container's position. Else it will be positioned to the first parentNode going up the tree from the desired div which has a position, if none is found it will be relative to the body. So you can search the first parent or grandparent container that has a position set. The question is hard to understand so if you would like to share some examples we would be glad to help.
EDIT:
In the example you posted it is exactley like in my comment, calculate the offsethWidth of the parent and the offsetWidth + left to not be overflowing if it is decrease the left or just remove left and set the right positioning. For the same effect on width and height you have to make some cases for the corners.
I am going to create a selection 'lasso' that the user can use to select portions of a table. I figured that positioning a div over the region is far easier than trying to manipulate the cell borders.
If you don't understand what I mean, open up a spread sheet and drag over a region. I want the div to align perfectly with the cell borders.
I have a very good idea of how to do this, but how would I get the (x,y) coordinates (screen position) of a table cell (td)?
Use .offset() along with .height() and .width() if necessary.
var td = $(someTDReference);
var pos = td.offset();
pos.bottom = pos.top + td.height();
pos.right = pos.left + td.width();
// pos now contains top, left, bottom, and right in pixels
Edit: Not .position(), use .offset(). Updated above.
Edit: Changed pos.width() to td.width()
Hey you should be able to do it like this (jsFiddle): http://jsfiddle.net/jackrugile/YKHkX/
$('td').hover(function(){
var xPos = Math.floor($(this).offset().left);
var yPos = Math.floor($(this).offset().top);
});
The Math.floor gets rid of the crazy decimals and makes it easier to work with in my opinion. Hope that helps!
you can use pageX and pageY to trackdown the mouse cursor x , y
$("#your_div").mouseover(function(e))
{
x = e.pageX;
y = e.pageY;
}
you can set the div border to highlight the div on mouseover simply by
$("#your_div").css("border","1px solid black");
this will kinda show current div selectable effect...
that if if the div is
position:fixed and then you can read its left and top property
hope that helps you
For those who doesn't want to use jquery:
var coordinates = td.getBoundingClientRect();
console.log(coordinates.left, coordinates.top, coordinates.right, coordinates.bottom);
I'm adjusting the height of the box with no problems, now I would like to adjust the height of the box grabbing the top handle and adjust height but upwards. What would be a good way of doing this? thanks
(current downwards code)
var mY = event.clientY;
var originalHeight = parseInt(document.getElementById('somediv').style.height);
if(click == 1){ // down
var sY = event.clientY;
var finalHeight = originalHeight +sY-mY;
document.getElementById('somediv').style.height=finalHeight + 'px';
}else{ // up
resize upwards instead of downwards....
}
An element's position is defined by its top-left corner - you'll have to move it up at the same time as you extend it from the bottom.
Resizing a DIV "up" is not as easy as resizing it "down". The reason is that when you specify a HEIGHT, the DIV will expand "down" as its normal flow. The top left corner of the DIV will remain static.
Allowing the DIV to be resized "UP" will give you a lot of issues. In order to do this, you will need to set the HEIGHT, then the POSITION of the DIV to currentHeight - previousHeight. You will notice it will jitter a lot when doing this.
Also, anything above your DIV will need to be displayed accordingly.
You should look into jQuery and the jQuery Dimensions plugin.