Develop Reference

Trying to move wordpress title on mobile only

Currently trying to finish a Wordpress build but I've ran into a slight problem.
I'm using the following Jquery code:
jQuery( document ).ready( function ($) {
var mobile = $(window).width();
if ( mobile <= 680 ){
$( ".product_title.entry-title" ).insertBefore( ".woocommerce-product-gallery" );
}
} );
So when the screen is less than 680px the class "product_title.entry-title" will be inserted before the "woocommerce-product-gallery" class. This basically moves the title ABOVE the product gallery on my product page.
BUT it's bugging me out because this code is only triggered every time the page is refreshed. So if I load the page and resize the browser nothing will happen until I refresh it. Is there any alternative method I can use to avoid this?

Building off of #Partha Roy's comment you could use a media query like so:
.product_title.entry-title.mobile-only {
display: block;
}
.product_title.entry-title.desktop-only {
display: none;
}
#media (min-width: 680px) {
.product_title.entry-title.mobile-only {
display: none;
}
.product_title.entry-title.desktop-only {
display: block;
}
}
Or in a non mobile responsive first strategy:
.product_title.entry-title.mobile-only {
display: none;
}
.product_title.entry-title.desktop-only {
display: block;
}
#media (max-width: 680px) {
.product_title.entry-title.mobile-only {
display: block;
}
.product_title.entry-title.desktop-only {
display: none;
}
}
And of course you'll need two sets of HTML in positions where you want them.
<div class="product_title entry-title desktop-only">...</div>
<div class="product_title entry-title mobile-only">...</div>
You can refer to this similar question: How to show text only on mobile with CSS?

You can use WordPress built-in “mobile detect” function wp_is_mobile to create a simple shortcode that can hide certain parts of your content from mobile visitors and-/or desktop visitors. The wp_is_mobile function returns true when your site is viewed from a mobile browser. Using this function you can create adaptive-/responsive WordPress themes based on visitor device.
For example,
<?php if( wp_is_mobile()){ ?>
// mobile stuff goes here
<div class="product_title entry-title mobile-only"> << Mobile Text >> </div>
<?php } else { ?>
// desktop stuff goes here
<div class="product_title entry-title desktop-only"> << Desktop Text >> </div>
<?php } ?>

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;
}
}

How to make an image a link when screen becomes small

I'm building a web page to learn about responsive web development and have run into a problem with my links. When the page width is small I would like to add hyperlinks to my images however when it becomes large I would like to take them off the images and put them on another element. Is there a way to do this with HTML, CSS and/or JavaScript?
For more context please take a look at this slideshow where I have added a breakpoint at screen width 450px. When the screen is wider, the hyperlink is on the "Read More" button, however I would like it to be on the image when the "Read More" button disappears.

If you wanted to use jQuery, you could do something like this:
Demo
JS:
$(document).ready(function() {
moveLink();
});
$(window).resize(function() {
moveLink();
});
function moveLink() {
if ($(window).width() >= 450) {
$("#myImage").unwrap();
$("#myText").wrap('<a href="https://www.stackoverflow.com">').show();
} else {
$("#myText").unwrap().hide();
$("#myImage").wrap('<a id="myLink" href="https://www.stackoverflow.com"></a>');
}
}
HTML:
<img id="myImage" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
<br>
<span id="myText">Read More</span>

Example using media queries (minimize the window to be less than 600px, you will see the link, otherwise you will see the image):
https://jsfiddle.net/89ptv9mt/
#media (max-width: 600px) {
.logo {
display : none;
}
.altText {
display : block;
}
}
#media (min-width: 601px) {
.logo{
display : block;
}
.altText {
display : none;
}
}
<img class="logo" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="MDN">
MDN

If Div is empty, hide it and change width of another div

I am new to css and php and am trying to find a way to hide my .item-page aside if the Div is empty. And then change the width of item-page to 100%. Right now the aside takes up 85px empty or not. How can do this in my php file?
Here is my CSS:
item-page {
position:relative;
width: 100%;
}
.item-page aside {
float:left;
position:absolute;
width:85px;
}
gk-article {
font-size:14px;
line-height:26px !important;
margin:0 0 80px 110px;
}
Here is my php file:
<div id="main">
<jdoc:include type="component" />
</div>

You've tagged javascript/jquery here, and that's probably what you should use (not PHP).
(in jQuery) you can do something like this - use classes as charlietfl suggested:
if( $('.item-page aside').html() == '') ) {
$('.item-page aside').hide();
$('.item-page').removeClass('isntempty').addClass('isempty');
} else {
$('.item-page aside').show();
$('.item-page').removeClass('isempty').addClass('isntempty');
}
CSS:
.isntempty {
width: 100%;
}
.isempty {
width: 50%; /* whatever your default width is */
}

You could set up different css class rules for empty vs not empty. These rules would set widths and/or display. Empty element would be zero...or don't even print it. Then run whatever test in your server code that determines status...and apply appropriate calsses to the elements

check by js in php:
<?php
...
echo "<script>if (document.getElementById('divId').innerText=='')
//or document.getElementById('divId').textContent=='' in firefox//
$('#divId').attr('style','width:100%;');
</script>";
...
?>

You can use Javascript, with the jQuery framework you could do this :
<script type="text/javascript">
$( document ).ready(function() {
//Hide if empty
if( $('.item-page').is(':empty') ) {
$('.item-page').hide();
}
//Change to width 100%
$('.item-page').css({width:'100%'});
});
</script>
Learn more here :
http://api.jquery.com/empty-selector/
http://learn.jquery.com/using-jquery-core/document-ready/

How do I speed up the load time of my jQuery sticky footer?

So I have been looking for a solid solution for a sticky footer for quite sometime. I found one that works well on every page and in every browser; however it takes some time to load and then take effect. Is there a way I can speed this up? Maybe load it before the page loads? Someone mentioned that it could be set to "onDOMready" instead of onLoad? Does that make sense?
Anyway, here is my code:
<script>
function positionFooter() {
var mFoo = $("#myfooter");
if ((($(document.body).height() +
mFoo.height()) < $(window).height() &&
mFoo.css("position") == "fixed") ||
($(document.body).height() < $(window).height() &&
mFoo.css("position") != "fixed"))
{
mFoo.css({ position: "fixed", bottom: "0px" });
}
else
{
mFoo.css({ position: "static" });
}
}
$(document).ready(function () {
positionFooter();
$(window).scroll(positionFooter);
$(window).resize(positionFooter);
$(window).load(positionFooter);
});
</script>
<!--content --->
<div id="myfooter" style="width:100%;"><!--footer content--></div>
How do I make it load faster?

No javascript needed (though it is helpful). The best thing to do here is take advantage of the marvelous min-height property rather than calculate from total document height.
html
<div id="wrap">
<div id="content">
<footer></footer>
</div>
css
html,body{
height:100%;
}
#wrap{
min-height:100%;
position:relative;
}
#content{
padding-bottom:20px; // allow room for footer
}
footer{
position:absolute;
width:100%;
bottom:0;
left:0;
height:20px;
}
As your page may be more complex than this, if you are finding that min-height:100% in css alone is not yielding the desired result, you may want to set in with javascript.
$(document).ready(function(){
var $window = $(window),
$wrap = $('#wrap'),
setMinHeight = function(){
$wrap.css('min-height',$window.height());
};
setMinHeight();
$window.resize(setMinHeight);
});
DEMO al la #Nick
DEMO with more content