Develop Reference

Using Javascript/Php: Trying to display background image - logic wrong?

So I want to display a background image (that is the thumbnail image in wordpress post) using css in hero-wrapper div if the screen size is min. 900px.
I have using php to check if there is a thumbnail image, then using javascript to check screen width and then adding background-image property to the dive. Not working, I think my logic is wrong??
HTML
<?php
if ( has_post_thumbnail() ) { ?>
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<script type="text/javascript">
if (jQuery(window).width() == 900) {
<?php echo '<section class="hero-wrapper" style="background-image: url(' . $thumb['0']. ') >'; ?>
}
</script>
<?php } ?>
<section class="hero-wrapper">
<figure class="frontpage-hero">
<div class="banner-box">
<h2>GET YOUR FREE CASE ASSESSMENT?</h2>
<h6>Enter your details below for a consultation</h6>
<form>
<input type="text" name="name" placeholder="Name..">
<input type="text" name="email" placeholder="Email..">
<input type="submit" name="submit">
</form>
</div>
</figure>
</section>
css
.hero-wrapper {
margin: 0;
padding: 0;
min-height: 669px;
background-repeat: no-repeat;
}
#media screen (min-width: 900px) {
.hero-wrapper {
min-height: 669px;
background-repeat: no-repeat;
}
}

You are echoing a <section> tag inside a <script> tag.
You should change this
<script type="text/javascript">
if (jQuery(window).width() == 900) {
<?php echo '<section class="hero-wrapper" style="background-image: url(' . $thumb['0']. ') >'; ?>
}
</script>
To something like this
<script type="text/javascript">
if (jQuery(window).width() >= 900) {
$('.hero-wrapper').css('background-image', 'url(' + <?php echo $thumb['0']; ?> + ')');
}
</script>

Your assumption is wrong twice:
your jQuery(window).width() == 900 condition will run only once and will not reflect window size changes
you're trying to use php (server side language) to output html (client side markup) inside javascript (client side code) code block. You will end up with syntax error.
Correct approach is to just output your html element and use CSS media queries to control its appearance. Something like:
.hero-wrapper {
display: none;
}
#media (min-width: 900px) {
.hero-wrapper {
display: block;
}
}
Please also notice that image displayed as background will not enforce element to have any height and hence your element will show up with 0px height (invisible in other words). You will need to specify element's dimensions somehow (and remember that images may have different aspect ratios).
After all it may be easier for you to not use background image but insert normal image instead and control its dimensions using CSS.

You're not adding anything to the existing "hero-wrapper" div with your code, you're just echoing some HTML within a Javascript block, which won't achieve anything. You've almost certainly got syntax errors in your console. The final rendered page will look something like this:
<script type="text/javascript">
if (jQuery(window).width() == 900) {
<section class="hero-wrapper" style="background-image: url('thumbnail.png') >
}
</script>
<section class="hero-wrapper">
<figure class="frontpage-hero">
...etc
This will get you a JS console error along the lines of:
Uncaught SyntaxError: Unexpected token <
Even if that part worked, the HTML is also invalid because you never close the style attribute with a ", and this code will only ever execute when the window width is exactly 900px, which I don't think you intended.
What you need to be doing is altering the existing div to add the style, and also allow it when the width is greater than or equal to 900px. This should do it:
<script type="text/javascript">
$(document).ready(function() {
if ($(window).width() >= 900) {
$(".hero-wrapper").css("background-image", "url('<?php echo $thumb['0']; ?>')");
}
});
</script>
I also wrapped the code in document.ready so that it won't run until the page is ready.

I'd remove the javascript and do this in your CSS media queries with display: none; to hide the element for screens under 900px i.e
HTML/PHP
<?php
if ( has_post_thumbnail() ) {
$thumb = wp_get_attachment_image_src(
get_post_thumbnail_id($post->ID), 'full' );
echo '<section class="hero-wrapper" style="background-image: url(' . $thumb['0']. ') >';
} ?>
And in your CSS
#media screen (min-width: 900px) {
.hero-wrapper {
min-height: 669px;
background-repeat: no-repeat;
display: block;
}
}
#media screen (max-width: 900px) {
.hero-wrapper {
display: none;
}
}

External Style is not detected by javascript (if conditon used)

I am relative new to web development so while developing a project site responsive design I ran into a problem that when ever hamburger menu is pressed even though lines for expending exists in external css file but it is not detected but new inine styles are created by javascript and then it works as expected.
HTML:
<nav class="mobileNav" id="mobileMenu">
<a class="mol-6" onclick="show();" href="index.html">
<figure>
<img class="icon" src="images/nav/home.png" alt="">
<figcaption>Home</figcaption>
</figure>
</a>
<a class="mol-6" onclick="show();" href="astronomy.html">
<figure>
<img class="icon" src="images/nav/astro.png" alt="">
<figcaption>Astronomy</figcaption>
</figure>
</a>
<a class="mol-6" onclick="show();" href="telescope.html">
<figure>
<img class="icon" src="images/nav/tele.png" alt="">
<figcaption>Telescopes</figcaption>
</figure>
</a>
<a class="mol-6" onclick="show();" href="about.html">
<figure>
<img class="icon" src="images/nav/about.png" alt="">
<figcaption>About</figcaption>
</figure>
</a>
</nav>
CSS:
#mobileMenu {
font-family: light, sans-serif;
max-height: 0px;
z-index: 99;
transform: translateY(-100%);
overflow: hidden;
padding: 0px;
transition: transform 0.5s;
}
Javascript:
function show() {
if (document.getElementById("mobileMenu").style.maxHeight == "0px") {
setTimeout(function(){
document.getElementById("mobileMenu").style.maxHeight = "100%";
document.getElementById("mobileMenu").style.position = "fixed";
document.getElementById("mobileMenu").style.padding = "1%";
}, 1)
document.getElementById("mobileMenu").style.transform = "translateY(0px)";
} else {
setTimeout(function(){
document.getElementById("mobileMenu").style.maxHeight = "0px";
document.getElementById("mobileMenu").style.padding = "0px";
document.getElementById("mobileMenu").style.position = "relative";
}, 500)
document.getElementById("mobileMenu").style.transform = "translateY(-100%)";
}}
Working Example:
Astromuneeb (Require Portrait Orientation)
Any help will be appreciated.

There are better approaches of what you are trying to accomplish. For instance, you could use css classes for styling and use javascript only for switching classes.

I agree with Eugene, but .mobileNav class seems to be overriding your portrait media query.
I added important to your .mobileNav portrait media query but even that won't override it, guess its something to do with hierarchy. It's weird you get display:none; as an inline style on your nav when opening and closing currently, that will not help.
Definitely just set a .open class as Eugene suggested. And use css transforms to do the animation. And just simply add/remove class on the nav.
And when using media queries in css for mobile etc prob best to use screen size etc, and start mobile first...
.mobileNav { display: block; }
#media (min-width: 992px) {
.mobileNav { display: none; }
}

JavaScript - Make an image turn white on click

I've got a bunch of images, on click I want the images to turn white emulating some kind of fade effect. So you click it and for 1 second it fades from the original image to just white. I also need it to turn back to the original image when the user clicks something else.
Is this possible with JavaScript? - If so what should I be looking at (I'm really bad with graphics).
I've had a go at trying this with opacity but I don't want the background to be visible behind the image

Psuedo-element Solution
You could use a wrapper with a pseudo-element to overlay what you're looking for -- and the animations are handled by a toggled CSS class (which is ideal for performance).
CodePen Demonstration
HTML
<div class="whiteclicker">
<img src="http://lorempixel.com/400/200" alt=""/>
</div>
SCSS
#import "compass/css3/transition";
body { background: gainsboro; text-align: center; }
.whiteclicker {
display: inline-block;
position: relative;
&::after {
content: "";
display: block;
position: absolute;
top:0; left:0; right:0; bottom:0;
background: white;
opacity: 0;
#include transition(opacity 1s ease);
}
&.active::after {
opacity: 1;
}
}
JS
$('.whiteclicker').click(function(){
$(this).toggleClass('active');
});

To ameliorate the Spencer Wieczorek solution (the way two seems to be the best solution on my opinion) :
What about creating the white div on the fly (and fade it in and out) instead of put it in the html code ?
See the fiddle.
$("#myImage").click(function(){
$(this)
.parent().css({position:'relative'}).end()
.after($('<div>')
.hide()
.css({position:'absolute'
, top: $(this).position().top
, left: $(this).position().left
, width: $(this).width()
, height: $(this).height()
, background: '#FFF'
})
.fadeIn('fast')
.on({
click : function(e){
$(this).fadeOut('fast', function(){ $(this).remove();});
}
})
);
});
Then, you don't have anything to add to the html code or in the css styles, Jquery does everything.
#Spencer Wieczorek : I did my own answer, because I did not agree with your way of designing the css style (the fixed position is really not good, especially if the page is scrolled for example...). Mine is more ... standalone-y ;)

You might want to try having two images stacked on each other.
See this:
<script type="text/javascript">
var image1 = '<img class="images" src="Image 1" onClick="switch();" />';
var image2 = '<img class="images" src="Image 2" onClick="switch();" />';
var currentImage = 1;
function switch(){
if(currentImage==1){
currentImage++;
document.getElementById("image").innerHTML = image2;
}
if(currentImage==2){
currentImage--;
document.getElementById("image").innerHTML = image1;
}
}
</script>
<style>
.images{ position:fixed; top: 0; left: 0; }
</style>
<img class="images" src="Black image" />
<div id="image"><img class="images" src="Image 1" onClick="switch();" /></div>
For the fade I'm just gonna see how you could do it.
EDIT:
<script type="text/javascript">
var fadecount = 100;
function fade() {
document.getElementById("imageToFade").style.opacity = fadecount;
fadecount--;
if(fadecount==0){
clearTimeout(fade);
}
}
function start_fade(){
var fade = setTimeout(fade(), 10);
}
</script>

With Base 64 you can just have the binary version of the picture and then an all white picture and based on the .click you reassign the src to the white base64...
document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
just change to the all white version after the click, technically js driven from click event, and doesn't involve two different elements existing just at different layers...

show loading icon until the page is load?

I wanted to show a loading icon to users until the page elements are fully loaded. How can I do that with javascript and I want to do it with javascript, not jquery?
Here is a link how google does it
How can I do this?
triggering some function on onload event or something like this .. I know it will be done somewhat like this or any other ways to do it?
Or there is some event for it?
UPDATE
I did something using display property I hide the body element but and onload of body tag I change its property but where to put the loading icon and add more interactivity.

HTML
<body>
<div id="load"></div>
<div id="contents">
jlkjjlkjlkjlkjlklk
</div>
</body>
JS
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'interactive') {
document.getElementById('contents').style.visibility="hidden";
} else if (state == 'complete') {
setTimeout(function(){
document.getElementById('interactive');
document.getElementById('load').style.visibility="hidden";
document.getElementById('contents').style.visibility="visible";
},1000);
}
}
CSS
#load{
width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("/loading.gif") no-repeat center center rgba(0,0,0,0.25)
}
Note:
you wont see any loading gif if your page is loaded fast, so use this code on a page with high loading time, and i also recommend to put your js on the bottom of the page.
DEMO
http://jsfiddle.net/6AcAr/ - with timeout(only for demo)
http://jsfiddle.net/47PkH/ - no timeout(use this for actual page)
update
http://jsfiddle.net/d9ngT/

The easiest way to put the loader in the website.
HTML:
<div id="loading"></div>
CSS:
#loading {
position: fixed;
width: 100%;
height: 100vh;
background: #fff url('images/loader.gif') no-repeat center center;
z-index: 9999;
}
JQUERY:
<script>
jQuery(document).ready(function() {
jQuery('#loading').fadeOut(3000);
});
</script>

add class="loading" in the body tag then use below script with follwing css code
body {
-webkit-transition: background-color 1s;
transition: background-color 1s;
}
html, body { min-height: 100%; }
body.loading {
background: #333 url('http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif') no-repeat 50% 50%;
-webkit-transition: background-color 0;
transition: background-color 0;
opacity: 0;
-webkit-transition: opacity 0;
transition: opacity 0;
}
Use this code
var body = document.getElementsByTagName('body')[0];
var removeLoading = function() {
setTimeout(function() {
body.className = body.className.replace(/loading/, '');
}, 3000);
};
removeLoading();
Demo: https://jsfiddle.net/0qpuaeph/

HTML, CSS, JS are all good as given in above answers. However they won't stop user from clicking the loader and visiting page. And if page time is large, it looks broken and defeats the purpose.
So in CSS consider adding
pointer-events: none;
cursor: default;
Also, instead of using gif files, if you are using fontawesome which everybody uses now a days, consider using in your html
<i class="fa fa-spinner fa-spin">

Element making ajax call can call loading(targetElementId) method as below to put loading/icon in target div and it'll get over written by ajax results when ready. This works great for me.
<div style='display:none;'><div id="loading" class="divLoading"><p>Loading... <img src="loading_image.gif" /></p></div></div>
<script type="text/javascript">
function loading(id) {
jQuery("#" + id).html(jQuery("#loading").html());
jQuery("#" + id).show();
}

HTML page
<div id="overlay">
<img src="<?php echo base_url()?>assest/website/images/loading1.gif" alt="Loading" />
Loading...
</div>
Script
$(window).load(function(){
//PAGE IS FULLY LOADED
//FADE OUT YOUR OVERLAYING DIV
$('#overlay').fadeOut();
});

firstly, in your main page use a loading icon
then, delete your </body> and </HTML> from your main page and replace it by
<?php include('footer.php');?>
in the footer.php file type :
<?php
$iconPath="myIcon.ico" // myIcon is the final icon
echo '<script>changeIcon($iconPath)</script>'; // where changeIcon is a javascript function whiwh change your icon.
echo '</body>';
echo '</HTML>';
?>

How to open different content in popups on clicking html links

I am using following code.I want to open different content on click.
<style>
#overlay_form {
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}
#pop {
display: block;
border: 1px solid gray;
width: 65px;
text-align: center;
padding: 6px;
border-radius: 5px;
text-decoration: none;
margin: 0 auto;
}
</style>
Following javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//open popup
$("#pop").click(function () {
$("#overlay_form").fadeIn(1000);
positionPopup();
});
//close popup
$("#close").click(function () {
$("#overlay_form").fadeOut(500);
});
});
//position the popup at the center of the page
function positionPopup() {
if (!$("#overlay_form").is(':visible')) {
return;
}
$("#overlay_form").css({
left: ($(window).width() - $('#overlay_form').width()) / 2,
top: ($(window).width() - $('#overlay_form').width()) / 7,
position: 'absolute'
});
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize', positionPopup);
</script>
I want to use something like following html
<html>
<div>
<a href="#" id="pop" >Product Overview</a>
<br/>
<div id="overlay_form" style="display:none">
<a href="#" id="close" >Close</a>
</div>
<a href="#" id="pop" >User Interface</a>
<div id="overlay_form" style="display:none">
<a href="#" id="close" >Close</a>
</div>
</div>
</html>
On clicking different links I want to open different content in pop up.
Is is possible without repetition of whole java script with different ids.
Thanks

First of all you can't use the same id twice on the same page, you currently use #pop, #close and #overlay_form on both your links, update them with a class or different ids.
You could add a div inside each of your a tags that stores your content then just show/hide this on click?

There are a number of ways in which you could do this, but the simplest one that uses your existing code, requires switching a lot of your id's to classes. Something like this:
HTML
<html>
<div>
Product Overview
<div class="overlay_form" id="popup1" style="display:none">
<a href="#" class="close" >Close</a><br />
Popup1 text.
</div>
User Interface
<div class="overlay_form" id="popup2" style="display:none">
<a href="#" class="close" >Close</a><br />
Popup2 text.
</div>
</div>
</html>
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//open popup
$(".pop").click(function () {
var targetPopup = $(this).attr('popup-id');
$("#" + targetPopup).fadeIn(1000);
positionPopup(targetPopup );
});
//close popup
$(".close").click(function () {
$(this).closest(".overlay_form").fadeOut(500);
});
});
//position the popup at the center of the page
function positionPopup(targetPopup) {
$("#" + targetPopup).css({
left: ($(window).width() - $('#overlay_form').width()) / 2,
top: ($(window).width() - $('#overlay_form').width()) / 7,
position: 'absolute'
});
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize', positionPopup);
</script>
This approach lets you use the class attribute to define a larger group of items that share the same behavior (as well as styles :) ), while still supporting the "uniqueness" of each popup.
Note: this makes use of a custom attribute (popup-id) which will not validate unless you update your DOCTYPE declaration to include it. Many people simply overlook that issue, though, particularly since HTML5 is adding support for custom attributes.
EDIT: forgot to mention . . . since you are changing your IDs to classes here, you will also need to update your CSS #pop and #overlay_form to .pop and .overlay_form.