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
Related
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 } ?>
I have a website. When I go on it with desktops and laptops a piece of text says: Click Here.
But when it viewed on mobile I want it to say: Tap here.
Is it possible to do this without creating a new site all together for mobile?
Thanks!
It's much better you "say what the action will do" as described by one of the comments but to answer your question straight, you can do this with just css media queries:
.mobile {
display: block;
}
.desktop {
display: none;
}
#media only screen and (min-width: 768px) {
.mobile {
display: none;
}
.desktop {
display: block;
}
}
<p class= 'mobile'>Tap here</p>
<p class= 'desktop'>Click Here</p>
You can do it using js:
let newText = ""
function changeText() {
if (window.innerWidth> 0 && window.innerWidth < 700) {
newText = "Tap Here!";
} else if (window.innerWidth > 700) {
newText = "Click Here!";
}
document.getElementById("text").innerHTML = newText
}
<body onload="changeText()">
<p id="text"></p>
</body>
Basically you create a function that runs when the page is loaded, in this functions window.innerWidth return the width of the window, if it is bigger the 700 (px) than the text will be "Click here!" but if the window width is beetwen 0 and 700 the text will be "Tap here!"
Edit: i just saw that in the code snippet it doesn't work, you should try doing it on your own and it will works
I have a website with a responsive background image for a div.
I choose which size of the image to take through #media queries.
The div in question in the code has the id banner-div.
HTML:
<div id="header-div">
<div id="background-clipped-div">
<div id="banner-div">
<div id="scroll-down-div" onclick="scrollToMainContent()">
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
</div>
CSS:
#media only screen and (max-width: 480px) {
#banner-div {
background-image: url(images/background-1-small.png);
}
}
#media only screen and (max-width: 768px) {
#banner-div {
background-image: url(images/background-1-medium.png);
}
}
#media only screen {
#banner-div {
background-image: url(images/background-1-big.png);
}
}
Question:
If I now want to swap/replace the image, for example by having an ever changing background image between multiple different images, how would I do that while respecting the correct image for a given resolution?
Let us say I have the following images in the images folder:
background-1-small.png
background-1-medium.png
background-1-big.png
background-2-small.png
background-2-medium.png
background-2-big.png
I know how to replace the path to the current image in JavaScript, but I
did not find a way to replace all #media queries.
You could use matchMedia for that.
Here's how I would do it:
- Each image container has it's responsive variations set as data-attributes so that we can access them in javascript for each breakpoint:
var $elements = $(".element");
var mqls = [ // list of window.matchMedia() queries
window.matchMedia("(min-width: 860px)"),
window.matchMedia("(max-width: 600px)"),
window.matchMedia("(max-width: 500px)")
]
for (var i=0; i<mqls.length; i++){ // loop through queries
mediaqueryresponse(mqls[i]) // call handler function explicitly at run time
mqls[i].addListener(mediaqueryresponse) // call handler function whenever the media query is triggered
}
function mediaqueryresponse(mql){
// check which breakpoint we're in and send the parameter "big", "medium" or "small" to the setBakground function
if (mqls[0].matches){
setBackground("big")
}
if (mqls[1].matches){
setBackground("medium")
}
if (mqls[2].matches){
setBackground("small")
}
}
function setBackground (size) {
// Loop through each element that needs to have the responsive background images and change the background image based on the current breakpoint
$elements.each(function() {
$(this).css({
"background-image": "url("+$(this).attr("data-"+size)+")"
})
})
}
.element {
width: 400px;
height: 400px;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element" data-big="//placehold.it/400x400?text=Big1" data-medium="//placehold.it/300x300?text=Medium1" data-small="//placehold.it/200x200?text=Small1"></div>
<div class="element" data-big="//placehold.it/402x402?text=Big2" data-medium="//placehold.it/302x302?text=Medium2" data-small="//placehold.it/202x202?text=Small2"></div>
EDIT: Sorry for the mix between vanilla js and jquery. I copied the first part from a website and then added the last parts with jquery.
EDIT2: Link to JS fiddle to test the responsiveness of it:
https://jsfiddle.net/q30u5o7j/
<p>Content1
<a class="button" onClick="toggleText()">Read More</a>
</p>
<p class="text2">
Hiding content2[ maybe by toggle so even the white space is gone]
<p>
By clicking the anchor link= read more, It toggles Content2.
For sure best way is CSS media query, but if you want to do that on js side you can add an event listener to window resize. Base on event prop you can check size of the window like this
window.addEventListener('resize', (e) => {
if (e.target.innerWidth < 980) {
// do stuff
}
});
#media only screen and (min-width : .....) and (max-width : 980px) {
.text2 {
display: none;
}
}
I have a question..I need to add an image when a push on the print button...For example of the top of the page I want to insert an image:
Print button:
<li>
<a id="myLink" href="#" onclick="window.print();return false;">Print</a>
</li>
The print css:
#social-bar,#footer-copyright,#modal-reported,#modal-voted,#block- user-container,#thevideoplayer
{
display:none;
}
Now,how I can to add the logo of company on the top?Help please
Add image in page. hide for screen and show for print.
#media print {
.printlogo{ // add printlogo as class for logo image
display: block;
}
}
#media screen{
.printlogo{
display: none;
}
}
In your print.css, make sure the logo container has display: block or is otherwise viewable.