I would like for an effect to happen (a certain <div id="posts"> to translate left) when clicking on any link of my page. I was wondering if there was a way to do this with javascript. The only thing I thought about was the function but to add the attribute onclick="myFunction" to all of my links would be so long..
Maybe there is a pre-made js function that works on any link?
I also thought about using CSS a:active but I don't think that would be the best idea.
Thanks for the replies! :)
You can use jQuery to look for clicks on the <a> element, and call a function from there:
$('a').click(function() {
// code to translate div left
});
You can use jQuery to make things work like this:-
$('a').click(myfunction);
function myFunction() {
//do click event stuff here :)
}
If you need a pure JavaScript alternative, I'm not sure if this will work but here's something you can try:
var a = document.getElementsByTagName("p");
for(var i=0; i<p.length; i++){
p[i].onclick = function(){
myFunction();
}
}
function myFunction() {
//do click event stuff here :)
}
For a better understanding, you can refer to http://jsbin.com/onaci/
I'm sorry if I misunderstood you. If so, please correct me.
Thanks
Related
I have a very little problem. I want to go on another site, by hovering an "a"-link (like clicking the link, just without the click :) ). Is this possible with css? If yes, how do you do that?
It's absolutely not possible with CSS, as far as I know, but you can do it with pure JavaScript or with any advanced JavaScript library.
I'm gonna give you a simple solution:
<a onmouseover="this.click();" href="...">link</a>
Or, if you want to use jQuery:
$('a').mouseover(function(){
$(this).click();
});
document.querySelector('#your_a_id').onmouseover = function()
{
window.location = "http://www.yoururl.com";
}
a way using javascript :)
onmouseover="function()"
window.location.href = "https://www.example.com";
now you can go on a URL just hovering over it.
I downloaded the jQuery plugin letter-fx (http://tuxsudo.com/code/project/letterfx) and really like what it can do.
However, on my landing page I'm trying to make the different paragraphs appear in sequence. I thought the best way to do that is to delay each paragraph with setTimeout()
I'm a JS/jQuery novice and hoping someone can help me out. Here's the code I have thus far:
$(function(fx1){
$(".fx1").letterfx({"fx":"fade","backwards":false,"timing":50,"fx_duration":"1000ms","letter_end":"restore","element_end":"stay"});
});
$(function(){
setTimeout(fx1,3000);
});
Can anyone show me what I'm doing wrong? Thanks!
Try below code. To use setTimeout you need to pass a function as first param.
$(function(){
var applyAnimation = function(){
$(".fx1").letterfx({"fx":"fade","backwards":false,"timing":50,"fx_duration":"1000ms","letter_end":"restore","element_end":"stay"});
};
setTimeout(applyAnimation,3000);
});
Fiddle - http://jsbin.com/udumibO/1/edit
If these divs are hidden (they're hidden by the .hide() event handler) then I want two other divs to show.
I tried the following on document.ready, but it's not working, and I have no idea why.
Here's the code.
if ($(".select-properties, .div-properties, .image-properties, .table-properties").is(':hidden')) {
$(".starter-properties, .canvas-properties").show();
}
Any help is greatly appreciated.
Use this:
if ($('.select-properties, .div-properties, .image-properties, .table-properties').css('display') == 'none') {
$(".starter-properties, .canvas-properties").show();
}
Try this link
It might be helpfull for you.
http://jsfiddle.net/rahulsahu/eveKU/
HTML :
<div id="first-div">first div</div>
<button id="first">hide above div</button><br/>
<button id="second">show another div when first div is hidden otherwise don't show</button>
<div id="second-div" style="display:none;">Second div</div>
JQuery :
$("button#first").click(function(){
$("#first-div").hide();
});
$("button#second").click(function(){
if($('#first-div').is(':visible')) {
// do nothing
alert("first div is not hidden");
}
else{
$("#second-div").show();
}
});
I managed to accomplish the effect I wanted using the following function.
$(".select-tool, .div-tool, .image-tool, .table-tool, .edit-tool").on("mouseup touchend", function() {
if ($(".select-properties, .div-properties, .image-properties, .table-properties").is(':hidden')) {
$(".starter-properties, .canvas-properties").show();
$(".select-properties, .div-properties, .image-properties, .table-properties").hide();
}
});
Here's the fiddle - http://jsbin.com/udumibO/3/edit
I'm sure there's a neater way to write this, but this is the best I could do to accomplish the effect I wanted.
Ok, it looks like a lot of code here. :P
Great, so I think, you just want to create a tab system and initially you want to hide all the tab content and show something else by default.
Well, Here is something which doing same as your code, and also solving your problem.
$("span", ".nav").click(function(){
var target = $("." + $(this).attr("class").replace(/tool$/g, "properties"));
target.show().siblings().hide();
$(this).addClass("active").siblings().removeClass("active");
});
$(".select-properties, .div-properties, .image-properties, .table-properties").hide();
jsfiddle: http://jsfiddle.net/ashishanexpert/c7eJh/2/
JSFiddle code is well commented.
Let me know, if something you want to add or ask about this. Good luck!
You can use
$(".target").toggle(function () {
// your remaining action. something written here
});
I'm writing javascript which will change the color of an element when the mouse hovers over it. I know perfectly how to do this using jQuery, but this time around I have to do it using either pure JS or Prototype.
Why doesn't this work:
<div id="boundary1"></div>
document.getElementById("boundary1").onmouseover(function() {
alert("test");
})
firebug returns:
TypeError: document.getElementById(...).onmouseover is not a function
Your syntax is wrong, you may be thinking a little too 'jQuery', try this:
var boundary = document.getElementById('boundary');
var mouseOverFunction = function () {
// this.style.color = '#000'; // your colour change
};
boundary.onmouseover = mouseOverFunction;
I've separated the logic to make the development and logic clearer, it makes your functions reusable too.
The Prototype way to do this would be this:
$('elementId').observe('mouseenter', function(evt){
this.setStyle('background-color: yellow');
}).observe('mouseleave', function(evt){
this.setStyle('background-color: inherit');
});
But as others have already pointed out, the real way to do this is with CSS. The only reason I could imagine needing to do it in JS is if you have to support IE <= 8, which doesn't like to do the :hover pseudo-class on anything except the A tag.
Try:
document.getElementById("boundary1").onmouseover = function() {
alert("test");
}
More Info.
Try this code
<td onMouseOver="this.bgColor='#00CC00'" onMouseOut="this.bgColor='#009900'" bgColor=#009900>
Click Here</TD>
You can do it using CSS
<style>
.changecolour:hover
{
background-color:yellow;
}
</style>
Now for the text you want to change color
<span class ="changecolour">Color changes when mouse comes here.</span>
Reference : http://www.w3schools.com/cssref/sel_hover.asp
What I'm trying to accomplish seems quite simple however, I'm not great at jQuery.
I did try to get as close as possible to a solution but whenever I click on the anchor tag twice, everything disappears. Obviously I'm doing something wrong.
I would like .slider1 to be visible by default and .slider2 to be hidden.
Also, when the anchor "Fader" is clicked, .slider1 is hidden.
http://jsfiddle.net/GQJxv/
Help anyone?
I have fixed up the code for you:
http://jsfiddle.net/ZAPwD/
Something like this?
$(".slider1").fadeIn("fast");
$("a.slider").click(function() {
$(".slider2").fadeOut("fast", function(){
$(".slider1").fadeIn("fast");
});
});
$("a.fader").click(function() {
$(".slider1").fadeOut("fast", function(){
$(".slider2").fadeIn("fast");
});
});
This looks like it cross fades pretty nicely:
http://martin-fleming.co.uk/examples/jquery-crossfade/