Okay, so this is something that has already been done so I know it's possible. What I'd like is that, when the user hovers the mouse on some word defined by the wordHoverAssign() function, something would get activated.
So, in a more concise manner: When the page is loaded the text I love potatoes! shows up on screen, created with HTML. Then the function wordHoverAssign("potatoes") is executed. What should happen then, when I hover the word potatoes, is that an alert message would pop up with, for example, this message You hovered the word!.
Is this possible? How would I go about doing it? I'd really like it if I didn't have to use any more frameworks/plugins. I'm using jQuery by the way.
Thank you.
My code so far (if you don't feel like setting it up):
wordHoverAssign("potatoes");
function wordHoverAssign(theWord) {
//code here
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I love potatoes!</p>
The following allows you to assign different function to any word inside the #content div. The associated function is called only when the specific word is hovered.
<div id="content">
I love potatoes!<br/>
She loves something else<br/>
The potatoes coming again.
</div>
<script>
window.wordsAssigned = {};
function wordHoverAssign(word,func){
wordsAssigned[word] = func;
}
wordHoverAssign('potatoes',function(){
alert('Patatoes hovered!');
});
wordHoverAssign('something else',function(){
alert('something else!');
});
$(function(){
var content = $('#content');
var html = content.html();
for(var word in wordsAssigned){
html = html.replace(new RegExp(word,"gm"),'<span onmouseover="wordsAssigned[\''+word+'\']()">'+word+'</span>');
}
content.html(html);
})
</script>
As per your need :contains('text') suits you better. see example:
wordHoverAssign("potatoes");
function wordHoverAssign(theWord) {
$( ":contains("+theWord+")" ).hover(function(){
alert("Hover happend");
})
}
Here is Updated DEMO
But above code will alert twice because of hover event also bind with body, so my suggestion is use special tag. See following snippet:
wordHoverAssign("potatoes");
function wordHoverAssign(theWord) {
$( "p:contains("+theWord+")" ).hover(function(){
alert("Hover happend");
})
}
Another DEMO for hover in p tag. It won't work on body hover.
Related
I am doing this for a "welcome dialog".
This function listens if you click on specific <div> and sends you to another web page or closes the welcome <div>.
But I think I couldn't make it work for the "close" functionality.
My script in the HTML head:
function hideWell() {
if (("welSolu").on('click hover')) {
location.href = "http://www.cnn.com";
}
document.getElementById("welScreen").style.visibility = "hidden";
document.getElementById("welScreen").style.display = "none";
document.querySelector("html").style.overflow = "visible";
}
My <div>s in the HTML body:
<div id="welScreen" onmousedown="hideWell()">
<div id="welSolu">to go another page click here</div>
</div>
I suggest you to use two different functions for that, because it is a good practice that one function does one thing. Event your code has several mistakes, without jquery you can do your thing like this:
function doRedirect(e) {
// Prevent event propagation to the outer div
e.stopPropagation();
// Do your redirect
console.info("redirect");
}
function hideWell(e) {
// Do the hiding thing
console.info("hideWell");
}
#welScreen {
padding: 15px;
background: gray;
}
#welSolu {
background: green;
}
<div id="welScreen" onmousedown="hideWell(event)">
<div id="welSolu" onmousedown="doRedirect(event)">to go another page click here</div>
</div>
There is no need to attach a function to the onmousedown event. Just set up event listeners for whatever you want. I'm not entirely sure when you want to hide the welcome div, but something like this should work:
$('#welSolu').click(function() {
location.href = "http://www.cnn.com";
});
$('#welScreen').click(function() {
this.hide();
});
HTML:
<div id="welScreen">
<div id="welSolu">to go another page click here</div>
</div>
The problem in your code is in the if clause - the on() method in JQuery uses callback mechanism - its not something you call to "check the status", instead you use it to "register for status change notifications".
So something like this is the intended behavior:
$("#welSolu").on('click hover', function() {
location.href = "http://www.cnn.com";
});
(although changing the current page when someone hovers over an element in the page is really disruptive, please don't do that).
This code shouldn't be inside the hideWell() function - it should be run as part of the ready state handling of your page - i.e. it should be run immediately as the "document becomes ready" but not before that. JQuery has a facility for that, which would look something like this:
$(document).ready(function(){
$("#welSolu").on('click hover', function() {
location.href = "http://www.cnn.com";
});
});
The other part of the function can stay the same as it is and it will get activated as you expect when the user "mouses down" on the part of the div that wasn't handled by the JQuery event handler - though it is likely a good idea to also change that to use JQuery event handling, just to make all the code use the same mechanism: its easier to understand and maintain that way.
So the full replacement code might looks like this:
Script in HEAD:
$(document).ready(function() {
$("#welSolu").on('click hover', function() {
location.href = "http://www.cnn.com";
});
$("#welScreen").on('click', function() {
document.getElementById("welScreen").style.visibility = "hidden";
document.getElementById("welScreen").style.display = "none";
document.querySelector("html").style.overflow = "visible";
});
}
I am testing out with a different way of menus. My code is the following:
JavaScript
var hubOpen = 0;
var test = "test";
$(document).ready(function(){
$('#hub').click(function(){
if(hubOpen == 0){
$('#hub').append(test);
hubOpen = 1;
} else {
//code for taking "test" out here
hubOpen = 0;
};
});
});
HTML
<body>
<p id="hub">Hub</p>
</body>
If you'd like, here's a jsFiddle here. The code is to make sure that when the id "hub" is clicked, "test" appears. When hub is clicked again, "test" disappears. The code, when run, opens test, doesn't let you click it again, but it doesn't delete "test" (as there is no code for it).
My question: How would I delete the variable "test" from the document but not to delete the variable forever, as I would need to use it later? Would the jQuery method
.replace();
work?
Thanks in advance!
To remove all the contents of an element, jQuery offers .empty():
$('#hub').empty();
The variable is completely separate from the element, so no problems there. If you wanted to restore the original text, just use .text():
$('#hub').text('Hub');
Updated fiddle
You can do something like this:
$(document).ready(function(){
$('#hub').click(function(){
$(this).text() == 'Hub' ? $(this).html('text') : $(this).html('Hub');
});
});
On click if the text is 'Hub' change it to 'text' else change it again to 'Hub'.
As a way of learning CasperJS, I am trying to initiate a click event on a div on a remote page, and then change the class name of the div after I have clicked it. The idea is to find the first clickable div, click it, and then mark it as clicked so I can skip over it to other clickable divs. The markup for the div tag on the remote page looks like:
<div class='clickable_div'></div>
I have tried the following casperjs code:
...
casper.then(function() {
if( this.exists( 'div.clickable_div' ) ) {
this.evaluate(function() {
this.click(document.querySelector('div.clickable_div'));
return document.querySelector('div.clickable_div').setAttribute("className","clicked");
});
}
});
...
It doesn't seem to work. First, I don't think I am initiating the mouse click event on the div correctly. What am I missing? Second, when I fetch the updated html, I don't see any changes in the div's class name. Am I going about this step in the wrong way?
You're calling this.click within evaluate(), it just can't work as evaluate() executes code within the page DOM context where there's probably no window.click method.
Here's a possibly working script:
var linkSelector = 'div.clickable_div';
casper.then(function() {
if (!this.exists(linkSelector)) return;
this.click(linkSelector);
this.evaluate(function(linkSelector) {
__utils__.findOne(linkSelector).setAttribute("className", "clicked");
}, linkSelector);
});
You may want to have better handling of errors and edge cases, but you get the idea.
Here is my script :
<body>
<div id ="mainCategory" class='fade'>
Category</div>
<div id="divSubCategory">
Category1
<br />
Category2
</div>
<script type="text/javascript">
$("div").hover(
function () {
$(this).append($("#divSubCategory").html());
},
function () {
$("#divSubCategory").remove();
}
);
$("#divSubCategory.fade").hover(function () { $(this).fadeOut(100); $(this).fadeIn(500); });
</script>
</body>
I want to show and hide divSubCategory on mainCategory hover. But it doesn't work. What should I add?
$(document).ready(function(){
$('#mainCategory').bind('mouseenter', function() {
$('#divSubCategory').fadeIn();
});
$('#mainCategory').bind('mouseleave', function() {
$('#divSubCategory').fadeOut();
});
});
Ok dude the problem is that you're using .html(). This copies the inner html (not the outer <div id="divSubCategory"></div> bit too... just the bit in the middle.
Because of this, when you do $('#divSubCategory').remove() its removing the actual div in the HTML, not the HTML you've moved into the div above.
Assuming you have display: none on #divSubCategory you will see the text from that div get appended to the first div, then when you mouse-out it will not go away (although the second (hidden) div will get deleted).
Anyway the way around this is to use clone(). I'll do a fiddle for you:
http://jsfiddle.net/fZZu5/1/
I also fixed your fades for you.
EDIT: This moves the div#divSubCategory into the div#mainCategory before showing it and then removes it completely from there when you mouse-out - this is what I assumed you wanted to do from your code. Nicks just shows and hides it where it is. Depending on what you want, both these answers are correct. :)
This is the 100% working with your requirement:
Check this: http://jsfiddle.net/ZWqnk/8/
Wrap your code inside the document.ready() function
$(document).ready(function(){
// Your code here
});
I have a div with the ID 'headercontent' and I have a script that will write a link amongst the others if javascript is enabled on the users system, but also has a backup using noscript just in case the user does not have javascript enabled.
The code runs fine and the 'a' element is written when executed but the problem is that the code is not written in the div it is executed in. It writes it outside of the 'headercontent' div and it ignores the class style completely, even though it is written in the rendered code. I'm not too worried about the styling/class because I can just add a style attribute to the element and get it written by javascript if necessary, but I'm more concerned about why its writing the code outside of this div.
My code is:
<div id="headercontent">
hey, this is a div.
This is a link
This is another link
<script type="text/javascript">
writeask()
function writeask() {
var writeaskbox = document.createElement('a');
writeaskbox.href = 'javascript:askbox()';
writeaskbox.className = 'button';
writeaskbox.innerHTML =
['Ask'].join(' ')
document.body.appendChild(writeaskbox);
}
function askbox(){
var askbox = document.getElementById('askbox')
if (askbox.style.display == 'none') {
askbox.style.display = 'block'
askbox.style.height = '150px'
} else {
askbox.style.display = 'none'
askbox.style.height = '0px'
}
}
</script>
<noscript>Ask</noscript>
</div>
How do I get the writeask() function to create this a element in the same div it is executed in? So that the final output is:
<div id="headercontent">
hey, this is a div.
This is a link
This is another link
Ask
</div>
Instead of:
<div id="headercontent">
hey, this is a div.
This is a link
This is another link
</div>
Ask
I'm still a beginner with javascript so I'm rather puzzled now. If anyone could help, that would be well appreciated.
Thank you in advance. Dan.
First of all, you are invoking writeask() before the function exists so, in this case you should do it the other way around. It should be:
function writeask() {}
function askbox(){}
writeask();
and then you are appending it to the body
document.body.appendChild(writeaskbox);
, not the div, as it should be
document.getElementById("headercontent").appendChild(writeaskbox);
Instead of
document.body.appendChild(writeaskbox);
use
document.getElementById("headercontent").appendChild(writeaskbox);
Instead of
document.body.appendChild(writeaskbox);
You should do the following:
document.getElementById('headercontent').appendChild(writeaskbox);