I am trying to create a div that can be attached to an element whenever user hover to the link
I have many links and my codes look like the following.
for loops to create many links
codes....
link.href='#';
link.innerHTML = 'test'
link.onmouseover = OnHover;
codes....
function OnHover(){
var position;
var div = document.createElement('div');
div.className='testdiv';
div.innerHTML = 'test';
position=$(div).position();
div.style.top = position['top'] + 15 + 'px';
$(this).prepend(div);
}
link element1
link element2
----
| | //add new div when hover link element2
----
link element2
link element3
my css
.testdiv{
position:absolute;
}
I want to add a new div everytime the user hover to my link and position on the left top of the element.
My code would position all the div on top instead of every element.
Are there anyway to do this? Thanks so much!
Without seeing your other JavaScript/markup I can make the following observations:
You need to set position:absolute on your new div before top will do anything.
You need to make sure link is non-position:static.
Non-dynamic styles like the above should be in your CSS, not JS.
Positioning absolutely means you shouldn't need to use $(div).position()
You're using a mix of jQuery and pure JavaScript which looks a little odd :)
JS
function OnHover() {
var position;
var div = $('<div></div>');
div.addClass('testdiv');
div.html('test');
div.css('top', 15);
$(this).prepend(div);
}
CSS
.testdiv {
position:absolute;
}
a.testanchor {
position:relative;
}
Related
Now I have div created with javascript this divs have a background image with a different image, I need to add a class name to each div based on background image name, Is there a way to do this in javascript or jquery?
// adding divs to mapContainer
var mapCont = document.getElementById("mapContainer");
for (var i = 0; i < 20; i++) {
var child = document.createElement("div");
child.classList.add("logo-" + i);
mapCont.appendChild(child)
}
css
#mapContainer > div.logo-3 {
background-image: url(../images/car.png);
}
#mapContainer > div.logo-4 {
background-image: url(../images/bike.png);
}
#mapContainer > div.logo-5 {
background-image: url(../images/train.png);
}
How to add a class name to each div with the same background image name in javascript without the image extension so the divs have another class with the name of background image?
If i understood your question correctly, you can get the image path from the CSS class using the following code:
var body = document.getElementsByTagName('body')[0];
var elem = document.createElement("div");
elem.classList.add('logo-3');
body.appendChild(elem);
alert(getComputedStyle(elem).getPropertyValue('background-image'));
body.removeChild(elem);
It will alert the background-image style. Use the contents to add it to your classList. You might want to get the path with a regex.
Make sure to add the element to the DOM to get the properties, otherwise it will return null.
How to get the width of the text.
var e=document.createElement('span');
e.style.fontSize = scope.fontsize;
e.innerHTML = "test";
console.log(e.offsetWidth);
Width always comes as 0
It seems like you have to append the created element to the document.
var e=document.createElement('span');
document.body.appendChild(e);
e.style.fontSize = 14;
e.innerHTML = "test";
console.log(e.offsetWidth);
e.remove();
Output: 23
Hiding the element does not work ether.
e.style.display= "none";
Output: 0
To "hide it" you could add a CSS like that. But with the added remove() it will likely not show up anyway. But adding position:absolute; is a good idea, since this will prevent flickering of the rest of the html content.
position:absolute;
margin-left:-1000em;
I have this jquery code that adds a class to a div(#menu) after the user scrolled that far on a page. But I am searching for a way to change that code into adding that class when the div(#menu) is on top of another div with the class(.remove) and remove the class again when it's on a div with the class(.add). Here is my code:
jQuery(window).scroll(function(){
var fromTopPx = 400; // distance to trigger
var scrolledFromtop = jQuery(window).scrollTop();
if(scrolledFromtop > fromTopPx){
jQuery('#menu').addClass('scrolled');
}else{
jQuery('#menu').removeClass('scrolled');
}
});
You need to find the position of the div that you want to "be on top of".
To do that you can use
$('.remove').offset().top;
Hope this helps.
I know it sounds silly, but what I want to do is trigger click with some html element hovering over another element.
Lets say we got .cursor that is hovering anchor text. In this case click on .cursor should open a google page.
<div class="cursor"></div>
<div class="htmlPage">
Google
Faccebook
Stack
</div>
Any ideas how to do that?
and this don't count
$('.cursor').click(function(){
$('.htmlPage a').click();
})
Cursor should be movable and should be able to click on other links.
Cursor is that blue circle hovering Google button.
Here I have cursor on google, now on click this should link to google, If i were to click on stack then stack should have opened.
If you are not using IE you can use pointer-events:none in CSS. Then your element will be unresponsive to any mouse interaction (and acting like a ghost foreground element).
The workaround for IE is someting like that:
var x = event.pageX;
var y = event.pageY;
$('.cursor').hide();
var here = document.elementFromPoint(x, y);
$('.cursor').show();
// Do what you want with the element here
// Find the parent a element needed with here.parentNode and here.tagName === "A"
// And then fire the click function
I've never use jQuery but I think it should work.
Hope it could help
you can try to get the ".cursor" position on click and compare to each ".htmlPage a" positions and change the window.location.href with the one of the element that overlaps
$(".cursor").click(function(){
var cursor=$(this);
var cl = cursor.offset().left;
var cr = cl+cursor.width();
var ct = cursor.offset().top;
var cb = ct+cursor.height();
$(".htmlPage a").each(function(){
var page=$(this);
var pl = page.offset().left;
var pr = pl+page.width();
var pt = page.offset().top;
var pb = pt+page.height();
if(((cl>pl&&cl<pr)||(cr>pl&&cr<pr))&&((ct>pt&&ct<pb)||(cb>pt&&cb<pb))){
window.location.href=page.attr("href");
}
});
}).draggable();
http://jsfiddle.net/EUmeB/
$('.cursor').click(function(){
$('.htmlPage a').click();
})
Attach an event handler to the cursor class.
$('.cursor').on('click',function()
{
window.location.href = $(this).siblings('.htmlPage').attr('href');
}
This gets the sibling of the element and makes the location equal to that sibling
To be a little more explicit, this might be best.
$('.cursor').click(function(){
$(this).next().children('a').click();
});
Try this:
Demo
// Target link in the next div, following div.cursor
$("div.cursor").click(function() {
var link = $(this).next(".htmlPage").children("a").attr("href");
window.location.href = link;
});
I'm designing mobile webpage using HTML5+Javascript. I added a image dynamically thro' javascript. But when i tried to set a text over that image dynamically, it doesn't work.
I want the text to be appear over the image.
My code is;
<script>
for(var i=0;i<5;i++) {
var ele = document.getElementById('container');
var table = document.createElement('table');
table.className = 'c1';
var tr = document.createElement('tr');
var td = document.createElement('td');
/* image added dynamically */
var img = new Image();
img.src = "Images/car.jpeg";
img.className = 'c3';
var txt = document.createTextNode('IE8');
td.appendChild(img);
img.appendChild(txt);
tr.appendChild(td);
table.appendChild(tr);
ele.appendChild(table);
}
<style> .img{height:50px;width:50px;}
.c1 {height:60px; width:100px;}
</style>
<body id='container'></body>
I have tried by adding a div component & then adding text + background-image to it. It's also not working.
Better choice whould be to set the image as CSS image-background property of the text container.
<td style="background-image: url('path_to_image');">
A not so good technique would be putting the text on a container floating, with an absolute position (this whould require JS) and z-index greater than the image element.
Try this as #Edorka suggests
td.backgroundImage="url('Images/car.jpeg')";
don't create img element.