My code is the following
$("#hammock").mouseenter(function(){
$("#changingtext").replaceWith("<p>My text goes here</p>")
$("#changingtitle").replaceWith("<h2>Making The Site Easy to Use</h2>")
});
$("#pointer").mouseenter(function(){
$("#changingtext").replaceWith("<p>my text goes here</p>")
$("#changingtitle").replaceWith("<h2>Do Not Click The Wrong Button</h2>")
});
If I hover over #hammock it will work but if I then go to #pointer nothing changes. Though if reloading the page, #pointer will work if I mouseover it first.
How do I get it so that after hovering over #hammock I can hover over #pointer and it will change the text?
This:
$('#changingtext').replaceWith("<p>my text goes here</p>");
completely obliterates the element formerly known as "changingtext". Subsequently, your attempts to locate it and update the text will fail.
However, you can replace it with content that shares its "id":
$('#changingtext').replaceWith("<p id=changingtext>my text goes here</p>");
It's always a good idea to do some experimentation with your code, either by taking advantage of the browser debugger or by simply adding console.log() calls to your code. In this case that would have shown you that your "mouseenter" handlers are indeed both working.
Related
So, here's a script that I've written to make some inputs dependent on an affirmative answer from another input. In this case, the 'parent' input is a radio button.
You can see that it hides parent divs of inputs when the document is ready, and then waits for the pertinent option to be changed before firing the logic.
If you'll look at the comment near the bottom of the javascript, you'll see what's been stumping me. If I remove the if statement, the change function does not fire. If I set the variable so that there is not an error logged in the console, then the change event does not fire.
If I change the jquery selector to $('select').change... the event fires, but obviously won't work on a radio button. Changing it to $('input').change... also fails.
<script type="text/javascript"><!--
$(function(ready){
$('#input-option247').parent().hide();
$('#input-option248').parent().hide();
$('#input-option249').parent().hide();
$('#input-option250').parent().hide();
$('#input-quantity').attr('type', 'hidden');
$('#input-quantity').parent().hide();
$('input[name="option\\[230\\]"]').change(function() {
if (this.value == '21') { //If yes, display dependent options
$('#input-option247').parent().show().addClass('required');
$('#input-option248').parent().show().addClass('required');
$('#input-option249').parent().show().addClass('required');
$('#input-option250').parent().show().addClass('required');
} else if (this.value == '22') { //If no, hide dependent options
$('#input-option247').parent().hide().removeClass('required');
$('#input-option248').parent().hide().removeClass('required');
$('#input-option249').parent().hide().removeClass('required');
$('#input-option250').parent().hide().removeClass('required');
}
});
//I don't know why this is necessary, but the input.change() event WILL NOT FIRE unless it's present. If I set the variable, then it breaks the change function above. If it's not here, it breaks the change function above. I'm stumped.
if(poop){}
});//--></script>
I'm really hoping that someone will see something rather obvious that my tired brain won't see. This is such a simple script, and I'm pulling my hair out over what seems like a rather annoying bug.
If you selector has special characters you need to use \\ before those characters.
$('input[name="option[230]"]')
should be
$('input[name="option\\[230\\]"]')
See http://api.jquery.com/category/selectors/
This may or may not be a good answer, but I managed to get the problem solved. I have another script on the page that is firing on the change event using this selector: $('select[name^="option"], input[name^="option"]').change(function() {
My best guess is that both functions cannot fire using a single change event from the same element. I moved the functional part of the code above to be within the second script, and it seems to be working as expected. If anyone wishes to contribute an answer that explains this behavior, I will accept it.
I have two instances that use the toggle(). So in the code there is this link:
Completely independent link
Followed by a more complex show hide toggle area:
Show All
And then the reverse of that:
Show Less
The problem I have is when I toggle the "Show all" link - it renders the "Completely Independent link" unusable. Sometimes it even opens shows/hides #div1?!?
Not really sure what is going on but the two instances are definitely getting muddled up.
I think what is happening is your click event is bubbling up the DOM and it hits other elements - but I can't be sure without seeing more of your HTML structure.
That being said - I would suggest putting everything in separate click observers, it removes the javascript from the HTML, and makes it easier to handle.
For example your 3 links
Completely independent link
Show All
Show Less
would change to
Completely independent link
Show All
Show Less
and add this in your head or js file or somewhere on your page
<script>
document.observe('dom:loaded', function()
$('link1').observe('click',function(){
$('div1').toggle();
});
$('showall').observe('click',function(){
$('showLessInfo').toggle();
$('showAllInfo').toggle();
$('showAllInfoLink').toggle();
});
$('showless').observe('click',function(){
$('showLessInfo').toggle();
$('showAllInfo').toggle();
$('showAllInfoLink').toggle();
});
});
</script>
Now for extra bonus, I changed the href="#" to href="javascript:void(0);" to avoid the need to stop the event.
Dude, your selectors are all messed up.
You can't just use $('div1'), because that won't return anything. If it's a class use $('.div1') and if it's an id use use $('#div1').
Also maybe avoid writing your handlers inline, it's much harder to read and notice possible errors. Just put all of that in a seperate javascript file.
I've got a somewhat "big" div (containing almost my whole page) and every second I do a
mydiv.empty() and then I rebuild it entirely.
I know it's not efficient at all but for now this will have to do for my code :/ The issue is that some inner div of "mydiv" have click event attached to them. And sometime, when the use click, the input is lost and never taken ito consideration by the inner div.
I tried to catch all click on my page with a document.click(). It did catch some lost click but many of them are still lost.
It seems those clicks occurs somewhere between the mydiv.empty() and the big mydiv.append() that re-creates all its content. I can't find a solution to grab these lost clicks. Any idea?
PS : I know I could probably get away by restructuring my whole page and updating more specific part of my div instead of recreating it but for now i'd like to find a faster/cheaper solution before redoing all this :)
Cheers !
EDit : as requested :
when (timer > 1 sec)
{
mydivContent = "lots of things here, including a small inner div"
mydiv.empty()
mydiv.append(mydivContent)
innerdiv.click(function..)
}
The lower the timer is, the more clicks are not registered by the innerdiv.click() event
I need to change the text that appears in the status bar of Chrome. Since it's not possible to use status.text anymore (for security reasons) I am wrapping an <a> tag over <body> so my code is <body>...</body> .
It's working as expected cause every time the user moves the mouse inside the page the status bar shows exactly what is inside the href attr of <a>. The problem: I did not realize till now that I cannot select any text inside the page cause if it's treated as link. I am using return false onclick event of and it works great cause the user is never redirected however it's not possile to select text inside the <a>.
Is there a CSS property that allows me to change that behaviour? It only occurs if <a> tag.
For the sake of hacking. This is invalid markup and bad code, but as a proof of concept (at least for Chrome).
One could use various combinations of mouse events, range selection and editable. Tricky part is to calculate what and where to select.
Sample code should give you selection of the first words in a paragraph; as in: click on the start of each paragraph like somewhere in "Lorem ipsum" or "Duis posuere" to select some of the words. This could then be combined with mousedown, mousemove, mosueup etc. to select correct text.
Chrome only Fiddle
You can try the CSS property pointer-events.
a{pointer-events:none} would disable the mouse event for that element.
But a better approach would be to add the URL in data-attribute and on click event you can navigate to those URL with location.href.
Will that help?
Ok, just for fun, and this is not the real hack but it something close:
Do like this:
<body>
<div class=container>bla bla bla</div>
<a href="my custom text" id=the_hack></a>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>
$(".container").hover(function(e){
$("#the_hack").trigger("focus");
});
</script>
Of course it will have some limitations, when you select text the status bar will disappear, also if you highlight text move the mouse out of the div than back in, the selection will be lost, but hey it's a hack.
See here what I mean.
I created a contentEditable div with a text portion and a link. Double clicking the link will select the link text.
<div contentEditable="true">
This is a text and This_is_a_link
</div>
Afterwards calling document.getSelection().getRangeAt(0).startContainer will return the div:
// => <div contenteditable="true">
Instead of the link. I cannot find a way to find which part of the div is selected.
See this jsfiddle (double click the "This_is_a_link" and there will be a console log with startContainer):
http://jsfiddle.net/UExsS/1/
(Obligatory JS code from the fiddle)
$(function(){
$('a').dblclick(function(e) {
setTimeout(function() {
console.log(window.getSelection().getRangeAt(0));
}, 500);
});
});
Note, that Chrome has the correct behavior, and running the above jsfiddle in Chrome will give textElement for startContainer.
Has anyone run into this issue? did you find a workaround?
Don't think its a bug of Firefox, just a different kind of implementation. When you double click the link, Firefox selects not only the text, but the whole a-tag, so the parent node of the selection is correctly set to the div container.
I added these few lines of code to your fiddle to proof that point:
var linknode = window.getSelection().getRangeAt(0).commonAncestorContainer.childNodes[1];
console.log(linknode);
console.log(window.getSelection().containsNode(linknode, false));
Forked fiddle: http://jsfiddle.net/XZ6vc/
When you run it, you'll see in the javascript console that linknode contains your link, and the check if the link is fully contained in the selection returns true.
This is also one possible solution to the problem, albeit not ideal one. Iterate over all the links in your contenteditable and check if one of them is fully contained in the selection.
Though one word of advice: Don't reinvent the wheel if you don't have to ;-) There's quite possibly some libraries / frameworks out there that fit your needs.