I would like to create a link; eg. 'Click here for background demo'. And then by clicking the link; the background of the webpage would then display an image, and that image is expandable.
I have an expandable background solution at stand alone; using the below.
But how could I have only display 'on click'; to become implemented.
<!--Expandable BG code IE 7 +-->
<style>
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
#page-wrap { position: relative; width: 950px; margin-left: auto; margin-right: auto;; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});
</script>
<!--Expandable BG code IE 7 +-->
You have following resize handler
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
If you want to invoke it on clicking on a link then you can use
$('a.link').on('click', function(e){
e.preventDefault();
resizeBg();
});
Just put the code given for click after/before your theWindow.resiz handler. Also make sure that you have an a tag with class link, like
Click
And remove .trigger("resize"); from the resize handler to stop the handler being invoked onload.
Related
When i click on a link (a href), only background loader appears. But the defined link is not opening, the screen strucks in the loader screen. In this screen i cant access any function. I have been trying this for weeks, but no positive results. Please help me to find the error in the added codings
$(document).ready(function() {
var loading = $('<div>').prop('id', 'loading');
loading.html('<div id="stretch"></div><img src="assets/img/ring.gif" style="repeat:no-repeat;" /> Loading...');
//FOR TESTING
//alert( loading.text() ); //FOR TESTING ONLY!!!
$("#cmd").click(function() {
loading.appendTo('body');
var event = $(document).click(function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
});
// disable right click
$(document).bind('contextmenu', function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
});
});
});;
#loading {
background-color: white;
background-color: rgba(1, 1, 1, 0.7);
bottom: 0;
left: 0;
position: fixed;
right: 0;
text-align: center;
top: 0;
}
#loading * {
vertical-align: middle;
}
#stretch {
display: inline-block;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li></i>Application</li>
.
Well of course it's not doing anything, when you stop the default event from triggering (clicking).
e.preventDefault();
This prevents the default action from happening. However, you are going to hit issues when you load 3rd party websites using Javascript.
I am trying to hide the popup if the background is clicked, but NOT the div.
Basically, when the user clicks the background it will hide the div; yet, if the user clicks the actual div it will still hide it. I would only like the div to be hidden on the clicking of the background.
Here is my code:
HTML
<div id="linkinputholder">
<div id="linkinputbox">
Title
</div>
</div>
<button onclick="displaylinkinput()" type="button"> Display </button>
CSS
#linkinputholder {
display: none;
position: fixed;
z-index: 100;
width: 100%;
min-height: 100%;
left: 0px;
top: 0px;
background: rgba(0, 0, 0, 0.2);
}
#linkinputbox {
display: block;
background-color: red;
width: 500px;
height: 100px;
position: fixed;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
JS/Jquery
function displaylinkinput() {
document.getElementById('linkinputholder').style.display = "block";
}
$('#linkinputholder').click(function() {
document.getElementById('linkinputholder').style.display = "none";
});
I'm assuming by background you mean your linkinputholder div, which is 100% wide by 100% tall. Your jquery code was missing the call to displaylinkinput, so i added a click event handler to call it. When you click on the linkinputbox div, the click event passes down through to linkinputholder. To prevent this just stop the event propagation.
$('#linkinputbox').click(function (evt) {
evt.stopPropagation();
});
I have created a JSFIDDLE for you here: http://jsfiddle.net/seadonk/oLgex1pq/
Here is the corrected javascript:
function displaylinkinput() {
$('#linkinputholder').show();
}
$(function () {
$('button').click(function () {
displaylinkinput();
});
$('#linkinputholder').click(function () {
$('#linkinputholder').hide();
});
$('#linkinputbox').click(function (evt) {
evt.stopPropagation();
});
})();
Edit
Check if div is target
$('#linkinputholder').click(function(event) {
if (jQuery(event.target).is('.linkinputholder')) return;
document.getElementById('linkinputholder').style.display = "none";
});
I have Jquery script to play navbar animation on one page and disable it on another page. it works on chrome but not on firefox. Heres my code:
var URL = window.location.pathname;
URL = URL.split("/");
if(URL[1] != 'holiday') {
$('.navbar').addClass('hide-menu');
$(window).scroll(function() {
slider();
});
} else {
$(".navbar").addClass('show-menu');
}
The slider function :
function slider() {
if (document.body.scrollTop > 500)
$('.navbar').stop().animate({
"margin-top" : '0'
});
else
$('.navbar').stop().animate({
"margin-top" : '-150px'
});
}
The CSS:
.show-menu {
margin-top: 0px;
}
.hide-menu {
margin-top: -150px;
}
Firefox hide the menu but it fail to play the animation and show the menu back. Any suggestion guys? thanks
You have to get the scroll amount from the element that actually has the scrollbar. Firefox considers that to be the <html> element.
You can wrap all your content in a container that's got overflow: auto set, and then use that as the thing to check for scroll amount as well as the place to put the scroll event handler. Here's a jsbin.
<body>
<div id=everything>
<div class=navbar>
HELLO WORLD
</div>
<!-- content ... -->
</div>
</body>
and CSS:
html, body { height: 100%; padding: 0; margin: 0; }
#everything { height: 100%; overflow: auto; }
I've a sticked element which gets the top-alignment from current scroll-offset. Problem is, that the layout is not "retriggerd" if the space from it is free. So there stays a ghost-gap where the sticked element was...
http://fiddle.jshell.net/pPc4V/
The markup is pretty simple:
...
as well as the js:
var $win = $(this);
var sticked = document.querySelector('a.sticked');
$win.on('scroll', function () {
var scrollTop = $win.scrollTop();
sticked.style.top = scrollTop + 'px';
// $win.resize();
});
...and the css looks good so far:
a {
display: inline-block;
width: 90px;
height: 90px;
background: deepskyblue;
}
.sticked {
position: relative;
top: 0;
left: 0;
background: tomato;
}
I tried to trigger the resize-event on scroll (as you see above uncommented), but no success! Any ideas, how to retrigger the layout so that the free-gap is filled with the next floated element?
Update
To clarify what I mean I made a simple image-timelime:
Step 1
Step 2
Step 3
The issue is that you are setting position fixed on an element which is displayed inline. That will cause that space to occur. I have redid your jsFiddle with proper alignment.
To fix it, I added the class "stuck" only when the document's scrollTop position is greater than the scrollTop position of your target element.
jsFiddle: http://fiddle.jshell.net/pPc4V/44/
HMTL:
<div id="grid">
etc...
</div>
CSS:
#grid {
height:1000px;
overflow:hidden;
float:left
}
#grid > a {
display: inline-block;
width: 90px;
height: 90px;
background: deepskyblue;
}
.stuck {
position: fixed;
background: navy !important;
}
JS:
$(window).on('scroll', function () {
var $doc = $(document),
parentElement = $('#grid'),
childToGetStuck = parentElement.find('a:nth-child(5)');
if ($doc.scrollTop() > childToGetStuck.scrollTop()) {
childToGetStuck.addClass('stuck');
//console.log($('.stuck').scrollTop())
} else {
childToGetStuck.removeClass('stuck');
}
});
If a HTML element (e.g. div) has a CSS background image is it possible to assign an event handler that is triggered when the user clicks on the background image, but not any other part of the element?
If so, a JQuery example would be much appreciated.
While it's not possible to detect a click on the background image, you can use some clever JS and CSS wizardry and come up with a masking element over the background image like this: http://jsfiddle.net/ahmednuaman/75Rxu/, here's the code:
HTML:
<div id="bg_img_1"></div>
<div id="bg_img_2">
<div id="hit"></div>
</div>
CSS:
div
{
display: block;
position: relative;
width: 200px;
height: 200px;
background-repeat: no-repeat;
background-position: center center;
}
#bg_img_1
{
background-image: url('http://placekitten.com/100/100');
}
#bg_img_2
{
background-image: url('http://placekitten.com/100/100');
}
#hit
{
display: block;
position: absolute;
width: 100px;
height: 100px;
background: #000000;
opacity: .3;
margin: 50px;
}
JS:
function handleClick(e)
{
console.log(e.target.id);
}
$( '#bg_img_1' ).click( handleClick );
$( '#hit' ).click( handleClick );
I think there is a better and simple way to achieve this here is my solution
$(document).ready(function() {
$("*").click(function(event)
{
if(event.target.nodeName == 'BODY')
{
alert('you have just clicked the body background');
}
});
Here is a very basic code that only work in x axis to show it's possible with injection of an img element with background-image url value as it's src and detecting the background image height and width to calculate if click happened on background image or not.
This code needs tons of improvement. It doesn't work in y axis. Also background-position and background-size are not involved. But it's easy to add those futures.
Here is Fiddle:
And here is jQuery code:
$('#d').bind('click', function(e){
var d = $(this),
bg = {};
//insert an image to detect background-image image size
$('body').append(
$('<img/>').attr('src',
d.css('background-image').split('(')[1].split(')')[0]
).attr('class', 'testImage'));
bg.h = $('.testImage').height();
bg.w = $('.testImage').width();
console.log(bg, e.offsetX, $('.testImage').width());
if(e.offsetX > $('.testImage').width()){
$('#l').text('it was NOT on background-image');
}
else{
$('#l').text('it was on background-image');
}
$('.testImage').hide();
})