javascript breaks when I want to print a page - javascript

So I created this webpage using JQuery. I use this code to resize the images on my page so that they fit in squares.
<script type="text/javascript">
$(document).ready(function(){
var height = $('.square').width();
$('.square').css('height', height);
window.onresize = function(event) {
var height = $('.square').width();
$('.square').css('height', height);
}
});
</script>
This works perfectly. The images resize to squares when I load the page or when i resize my browser window. The problem is when I go and press print page (I'm using google Chrome). The printer preview loads the page as if these two scripts don't exist. So the images are their original sizes.
Any Ideas ?

If you just want to keep images square, you might not even need javascript, the below gives you an example, the bonus it's responsive..
.pic-wrapper {
width: 40%;
float: left;
margin-right: 20px;
}
.pic {
width: 100%;
padding-bottom: 100%;
background-image: url('http://i.imgur.com/uTDpE6J.jpg')
}
<div class="pic-wrapper">
<div class="pic">
</div>
</div>
<div class="pic-wrapper">
<div class="pic">
</div>
</div>

Related

How to swap images from side bar to the middle div on clicking on those sidebar images?

I'm new to JavaScript and I'm trying to build a web page and I've 3 images of that product in my sidebar and one main image in the middle now I want to get the sidebar image in the middle when a user clicks on that sidebar image. I don't know how to go about this. I've already tried couple of ways which I've found online, one of them is this
1. How to swap image and video to another div?
But these are not working out for me.
What you have to do is save both images in a variable and then swap them. Look at the example below
var imgleft,
imgcenter,
$center = $(".center img");
$(".sidebar img").click(function(){
imgleft = $(this).attr("src");
imgcenter = $center.attr("src");
$center.attr("src", imgleft);
$(this).attr("src", imgcenter);
});
.sidebar{
position: absolute;
top: 0;
width: 70px;
height: 100%;
background: red;
}
.center{
width: 80px;
height: 80px;
margin:25% auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<img src="http://placehold.it/70x70">
<img src="http://placehold.it/70x60">
<img src="http://placehold.it/70x50">
</div>
<div class="center">
<img src="http://placehold.it/70x40">
</div>
You can use javascript's event handling (on each of your sidebar images) to solve this problem. First add the following java script code in your html:
<script type="text/javascript">
function changeToImage1(){
if(centerImage.src != "[1st-image-url.*]"){
centerImage.src = "[1st-image-url.*]";
}
}
function changeToImage2(){
if(centerImage.src != "[2nd-image-url.*]"){
centerImage.src = "[2nd-image-url.*]";
}
}
function changeToImage3(){
if(centerImage.src != "[3rd-image-url.*]"){
centerImage.src = "[3rd-image-url.*]";
}
}
</script>
Then you can simply add the above functions in the onClick attributes of your three sidebar div's accordingly. This can be done like this:
<div id = "first" onclick = "changeToImage1()">
...
</div>
<div id = "second" onclick = "changeToImage2()">
...
</div>
<div id = "third" onclick = "changeToImage3()">
...
</div>

highcharts div resize to min and max on click

I have a page where multiple graphs are shown for different components. I am using highcharts. Below is the code. How can I set it up so that when the user clicks on the div , it will resize that graph to the whole page and a click will bring it back to the orginal size. Basically to toggle on each click between max screen and original size using javascript or jquery.
<div id="graph_id"></div>
<div id="top_container">
<div id="container_1" style="float:left ; height: 50%; width:32%; min-width: 200px; background:#000000; padding:5px;"></div>
<div id="container_2" style="float:left ; height: 50%; width:32%; min-width: 200px; background:#000000; padding:5px;"></div>
<div id="container_3" style="float:left ; height: 50%; width:32%; min-width: 200px; background:#000000; padding:5px;"></div>
</div>
</div>
All the highcharts are rendered to the containers using the code
var chart_container_opt_1 = {
chart: {
renderTo: 'container_1',
.....
var chart_1 = new Highcharts.StockChart(chart_container_opt_1);
and similar ones for chart_2 with container_2 and chart_3 for container_3
You can use highchart function :-
chart.setSize (width,height);
On every click calculate the new height and width which you can easily find using jquery height() and width() functions. and after that call the above function with new parameters.
Have a look at
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/members/chart-setsize-button/
Second solution is using highslide which allows to open chart in the popup.
Example: http://jsfiddle.net/roadrash/GqhEX/

Problems with displaying modal popups in mobile browser and on resizing browser window

I have some problems with a modal popup dialog on a site that I'm building. This is the site: www.notforsale.magalidb.com
These links all have a modal popup behind them:
"Lisez la version en ligne"
"Read the online version"
"Conditions"
"Contactez la redaction"
"Contacteer de redactie"
"Contact the redaction"
The problems:
When I browse to the website via Safari mobile (on iPhone or iPad) and I click on any of the above mentioned links, a popup appears. But when I zoom in, the popup jumps away (mostly to the lower right of the screen). So I can't zoom in on whatever is written in that popup.
When I browse to the website via regular browsers such as Safari, Opera, Firefox, Chrome or Internet Explorer (didn't test on IE though), and I click on "Bekijk de online versie", then I get to see a larger popup that holds a magazine which can be flipped like a book. If I then resize the browser window, this popup jumps to the lower right of the screen. I then have to close the popup and reopen it in order to see it centered again.
What I want:
What do I need to edit in my existing code to make my popups remain centered? Even in mobile browsers?
How do I prevent this particular popup from jumping to the corner of the browser? I didn't write it differently than the other popups, the only difference is the width and height. But I don't see why it always jumps away, unlike the other popups...
If anyone has a possible solution, please do share. This is quite urgent, since I find that my client deserves a website that functions correctly.
The code: popup.js
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a.modal').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height() ;
var winW = $(window).width() ;
//Set the popup window to center
$(id).css('margin-top', winH / 2-$(id).height()/2);
$(id).css('margin-left', winW / 2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
$(window).resize(function () {
var box = $('#boxes .window');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
box.css('margin-top', winH/2 - box.height()/2);
box.css('margin-left', winW/2 - box.width()/2);
});
});
The code (example, please see site source for full code): index.php
<!DOCTYPE html>
<html>
<head>
<title>NOTFORSALE, the most exclusive car magazine</title>
<link href="stylesheets/default.css" rel="stylesheet" type="text/css">
<!-- jQuery library: -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<!-- Cycle plugin: -->
<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/launch_scripts.js"></script>
<script type="text/javascript" src="scripts/popup.js"></script>
</head>
<body>
<div id="main">
<div id="main-container">
<div id="content">
<div class="content-left">
<div class="box" id="box1">FR</div>
<br><br>
<a href="#dialogFR" class="modal">
Telechargez pour iPad ou Android tablet</a>
<br><br>
Lisez la version en ligne
</div>
<div class="content-center">
<div class="box" id="box2">NL</div>
<br><br>
<a href="scripts/notforsale_DL_NL.php" target="_blank">
Download voor iPad of Android tablet</a>
<br><br>
Bekijk de online versie
</div>
<div class="content-right">
<div class="box" id="box3">EN</div>
<br><br>
<!--
<a href="scripts/notforsale_DL_EN.php" target="_blank">
-->
<a href="#dialogEN" class="modal">
Download for iPad or Android tablet</a>
<br><br>
Read the online version
</div>
</div>
</div>
</div>
!-- From here, the popups start -->
<div id="boxes">
<div id="dialogFR" class="window popup-windows" style="width: 600px !important; height: 250px !important;">
<img class="cbc" src="images/close.png" alt="close">
<?php include 'comingsoonFR.php'; ?>
</div>
<div id="dialogNL" class="window popup-windows" style="width: 1200px !important; height: 510px !important;">
<img class="cbm" src="images/close.png" alt="close">
<?php include 'magazineNL.php'; ?>
<div style="z-index:20; margin: -80px; text-align: center;">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player">
<br>
Download voor iPad of Android tablet
</div>
</div>
<div id="dialogEN" class="window popup-windows" style="width: 600px !important; height: 250px !important;">
<img class="cbc" src="images/close.png" alt="close">
<?php include 'comingsoonEN.php'; ?>
</div>
<div id="mask"></div>
</div>
</body>
</html>
The code (only showing CSS related to the popups): default.css
/* Popup design */
#mask {
z-index:9000;
position:absolute;
left:0;
top:0;
background-color:#000;
display:none;
}
#boxes .window {
width: 1200px !important;
height: 510px !important;
z-index:9999;
position:fixed;
left:0;
top: 0;
display:none;
padding:20px;
background: white;
border: 1px solid #4D4D4D;
border-radius: 15px;
box-shadow: 0 0 5px black;
}
.popup-windows{
background: #4D4D4D !important;
border: 1px solid white !important;
font-size: 10pt !important;
font-weight: normal !important;
}
#boxes #dialog {
width: 600px;
height: 500px;
padding:10px;
background-color: #ffffff;
}
.cbm{ /* Short for CloseButtonMagazine */
margin-top: -45px;
margin-left: 1196px;
position: fixed;
}
.cbc{ /* Short for CloseButtonContact */
margin-top: -45px;
margin-left: 600px;
position: fixed;
}
I know this might be a lot of text for a question, but I really want to give as much details as I can, in order to make it easier for you to see the whole bundle. As mentioned earlier, you can see the website and test out the popup issues. I use Google Chrome for testing it out, and if all works well there, I check out the site in other browsers to make it compatible.
Also, I think the jumping popup issue is solvable. I saw other tutorials for making modal popups and those work just fine in my mobile browsers, but I can't afford having to recode all those popups. Unless I can edit the existing code and shorten it, while remaining the functionality and without having to edit anything in index.php. Anyway... Please just take a look at it. It might be easier to just meddle with it in-browser, inspecting the elements and such... It's quite a lot of code.
Any help is GREATLY appreciated!
set your modal popup to position: fixed and height/width 100%, that should cover up the whole screen, and you won't have to worry about window resizing.
for your individual popup boxes, set them to position: fixed as well, and use top/left to position instead of margins. As for zooming, I'd have to see this in action to get a better grasp of the effect you're going for.

Writing a JavaScript function to open an image in (css)pop up with a close button?

I am a new HTML developer, so can someone please describe briefly how to write a JavaScript function to open an image in (css) pop up with a close button?
Just to get you started I've set up an simple example for you, try it out here: http://www.lunarailways.com/demos/popup.html
<html>
<head>
<style>
#popup {
border: 1px solid gray;
border-radius: 5px 5px 5px 5px;
float: left;
left: 50%;
margin: auto;
position: fixed;
top: 200px;
z-index: 9999;
}
</style>
</head>
<body>
<h1>Your page</h1>
Open Image 1
Open Image 2
Open Image 3
<div id="popup" style="display:none">
<a id="popup-close" href="" class="button">Close</a>
<p>
<img id="image-placeholder" src="">
</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".popup-open").click( function(e) {
$("#popup:visible").hide(); //hide popup if it is open
e.preventDefault(); // don't follow link
$("#image-placeholder").attr("src", $(this).attr("href")); // replace image src with href from the link that was clicked
$("#popup").fadeIn("fast"); //show popup
});
$("#popup-close").click( function(e) {
e.preventDefault();
$("#popup").fadeOut("fast");
});
});
</script>
</body>
</html>
FanyBox, which is uses the jQuery library is the right tool for that.
In a simple way,
- place anchor and image tags in a div container.
- set display attribute of the div to "none".
- create displayMyPopup and closeMyPopup functions in js.
- set anchor's onclick attribute to closeMyPopup.
- in displayMyPopup function, set the div's display attribute to "block"
- in closeMyPopup function, set the div's display attribute to "none"
or you can use jquery's show/hide functions.
I guess jQuery library is a good start. Start with defining your HTML markup and then google image galleries and see what fits your bill.
Something like this:
<ul class="gallery">
<li><img src="path-small-image" alt="thumbnail" /></li>
</ul>

Display image when ads content is removed

I placed a piece of ads code in a div and at the bottom of page, I have javascript code that checks for the offsetHeight size of the div. If "0" is returned, I could safely assume that the ads has been chewed by ad blockers
What I'm trying to do is, I want an image to appear in the spot where the ads was supposed to be showing when the ads was blocked.
Any idea how to do this?
Edit: Forgot to show the codes
<div id="div_bleh">
ads goes here
</div>
<script type="text/javascript">
function check_blehsize()
{
if (document.getElementById("div_bleh").offsetHeight == 0)
// do stuff
}
window.onload = check_blehsize;
</script>
Here's an example which I tested against a very common ad blocker - Firefox's Adblock Plus (using the EasyList filter):
Live Demo (edit)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.innocent-class {
background: url(http://www.google.com/images/logos/ps_logo2.png);
width: 240px;
height: 400px
}
.justForTesting, .advertise_ads {
width: 240px;
height: 400px;
background: #fff
}
</style>
</head>
<body>
<div class="innocent-class"> <!-- just don't call it "advertContainer" :) -->
<div class="advertise_ads justForTesting">
advert here!
</div>
</div>
</body>
</html>
When Adblock Plus finds an element with a class (for example) .advertise_ads, it will hide that element.
If it does, the "please don't block my ads!" background-image (in this case, the Google logo) from the parent element will be visible.
If the advert isn't blocked, the advert will cover the replacement image.
Try changing advertise_ads to something else such as sdpfjsdfjp, and the advert will be visible.
I imagine this technique will also work with most other ad blockers.
You can add a class to that div with javascript(jquery in example below),
for example,
adContainer = $(".ad-container");
if ( $(".ad-container").height() == 0 ) {
adContainer.addClass("no-ads");
}
and the css will be
.no-ads {
background: url(the_picture.jpg) no-repeat 0 0;
width: ?px;
height: ?px;
}
Assuming you know the size of the adverts you will be displayed, which normally you do.
<div class="advert">
<!-- Adverts go here -->
</div>
.advert {
background-image: url(blah);
width: 120px;
height: 250px;
}
.advert > * {
background-color: white;
}
When the advert gets chewed up by an ad blocker wouldn't this content show instead. Just an idea, I've never personally tried to get around an ad blocker.

Categories