I know how to implement clickable background on current page using css and js.
I'm placing image with top center background position and making it clickable by following js:
<script type='text/javascript'>
$(function () {
$('body').bind('click', function (evt) {
if(evt.target == $('body')[0]) {
window.open('http://goto.com');
}
});
});
</script>
Now I would like to make one step forward and implement such an advertisement only with JS without changing any of my css styles. I know that its possible because many ad agencies are using something like this:
<script language='Javascript' src='//adserver.com/view.php?ad=123'></script>
You can update the style of an element easily with jQuery. Example:
$('body').css({ background-image: 'url(/img.png)' });
So, your code should be something like:
<script type='text/javascript'>
$(function () {
$('body').css( { /* SET YOUR CSS MODIFICATIONS HERE */ } );
$('body').bind('click', function (evt) {
if(evt.target == $('body')[0]) {
window.open('http://goto.com');
}
});
});
</script>
Related
so I'm making a portfolio gallery as a part of a website I'm building for a little practice.
On hover I'm trying to get an overlay, as this didn't work on phones I thought it would be a good idea to make a jquery fallback. This is my code:
$(document).ready(function(){
$('.overlay-1').mouseenter(function() {
$(this).css('opacity', '1')
$(this).mouseleave(function() {
$(this).css('opacity', '0')
});
});
$('.overlay-2').mouseenter(function() {
$(this).css('opacity', '1')
$(this).mouseleave(function() {
$(this).css('opacity', '0')
});
});
$('.overlay-3').mouseenter(function() {
$(this).css('opacity', '1')
$(this).mouseleave(function() {
$(this).css('opacity', '0')
});
});
});
It goes on in this fashion, to enable users to see the overlay when a certain image is clicked. Surely there is a better way of writing all this? Maybe using variables, I'm not sure
Thanks guys!
I would give each overlay the same class and then toggle a class that lowers/raises the opacity on click (not mouseenter/mouseleave since its for mobile fallback). For example:
JS Fiddle
New class to add/remove on click:
.opacity-lower {
opacity: 0;
}
JQuery - Toggle Class
$(document).ready(function () {
$('.overlays').click(function () {
$(this).toggleClass('opacity-lower');
});
});
function show() {$(this).css('opacity', 1);}
function hide() {$(this).css('opacity', 0);}
[1,2,3].forEach(function(num) {
$('overlay-'+num).mouseenter(show).mouseleave(hide);
});
I have a (simple) question : is it possible to do 2 differents actions when I click on a picture on an html page? Are there examples to explain that?
Thanks in advance
Sure that's easy.
document.getElementById("myPic").addEventListener("click", function(e){
doActionOne();
doActionTwo();
});
You can do simultaneous actions within an onclick event attached to your picture, using jQuery or plain javaScript.
In jQuery for instance, where #myImg is the id of the image:
HTML image tag:
<img id ="myImg" alt="image" src="someImg.png">
jQuery code:
https://api.jquery.com/click/
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
(function ($) {
$(window).load(function () {
$("#myImg").click(function () {
//Change source of the image
$(this).attr( "src", "anotherimage.png" );
// Do something else here...
});
});
})(jQuery);
</script>
Using plain javaScript:
<script type="text/javascript">
window.onload = function() {
document.getElementById('myImg').addEventListener('click', function (e) {
//Change source of the image
this.setAttribute('src', 'anotherimage.png');
// Do something else here...
});
};
</script>
Here is what I am trying to do. I have a button (#facebook-button) that when clicked will show the contents of a div (#facebook). Now I want it so when the mouse is not on top (hover) of the div #facebook that it then hides the div #facebook.
Here is what I have so far:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
Any suggestions?
You can use jQuery's on mouseleave event, that event is fired when the mouse leaves the area.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide().on('mouseleave', function() {
jQuery('#facebook').hide();
});
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
You can try some thing like this.
CSS
div { display: none; }
HTML
<a id="hover" href="#">Show</a>
<div id="div">Contents</div>
JS
$('#hover')
.mouseleave(function() {
$('#div').hide();
})
.click(function(e) {
e.preventDefault();
$('#div').show();
});
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
$('#facebook').on('mouseenter', function() {
// do something or remove that part to just leave mouseleave
}).on('mouseleave', function(){
$('#facebook').hide();
});
});
});
</script>
Basically after showing the div, we will just spot when his mouse is leaving the #facebook div to hide it.
You could also optimize the code and put $('#facebook') in a variable considering the amount of time you re use it. Saves you calling jquery more times than actually needed.
Try this Demo.
$('.fbContent').hide();
$('button').hover(
function() {
$('.fbContent').show();
},
function() {
$('.fbContent').hide();
}
)
I'm trying to get a script so that when this div #events is clicked the content currently in #meet div changes it's visibility to hidden (so that space is preserved) and then using jquery load method, the content in v2.html is loaded into the #meet div. However, right now the #meet div disappears but the new content does not appear. Any ideas why?
HTML:
<div id="meet">
........
<div id="exec"></div>
........
</div>
JS:
$(document).ready(function(){
$("#exec").click(function(){
$("#meet").load("execute.html").fadeIn('slow');
});
$("#events").click(function() {
$('#meet').css('visibility','hidden', function() {
$('#meet').load("ev2.html", function() {
$('#meet').css('visibility', 'visible');
})
})
});
});
.css doesn't take a function as a third parameter. It does take a function as a second parameter with only a propertyName as the first: api.jquery.com/css. Try removing that function call and moving $('#meet').load() to just below the first .css call.
You can chain the .css and .load functions as well.
$(document).ready(function(){
$("#exec").click(function(){
$("#meet").load("execute.html").fadeIn('slow');
});
$("#events").click(function() {
$('#meet').css('visibility','hidden').load("ev2.html", function() {
$('#meet').css('visibility', 'visible');
});
});
});
use CSS class instead in JQuery : addClass("foo") which contains the style you want and removeClass("boo") which contains the style you don't want.
look at this fiddle jsfiddle.net
$("#navigation").on("click", function(){
if($(this).hasClass("foo")){
$(this).removeClass("foo");
$(this).addClass("boo");
$(this).animate({width: 100}, 350);
} else {
$(this).removeClass("boo");
$(this).addClass("foo");
$(this).animate({width: 100}, 350);
}
});
I am fairly new to javascript and I am trying to make a second sticky menu on my site. I have the second nav change its class as you scroll down which seems to work fine. However, I want it to go back to its original class once you scroll back up. Any help? The code is below.
<script type="text/javascript">
$(window).scroll(function () {
if (window.scrollY > 200)
{
$("#top-bar").removeClass("nav-main").addClass("navbar-inner").addClass("navbar-fixed-top");
}
});
</script>
Thanks.
maybe something along the lines of an else to restore the original classes.
<script type="text/javascript">
$(window).scroll(function () {
if (window.scrollY > 200) {
$("#top-bar").removeClass("nav-main").addClass("navbar-inner").addClass("navbar-fixed-top");
} else {
$("#top-bar").addClass("nav-main").removeClass("navbar-inner").removeClass("navbar-fixed-top");
}
});
</script>