Develop Reference

Switching text and hrefs depending on scroll location with JS

I have a page with a lot of text that requires some amount of scrolling. I was able to get a button, when clicked, to shoot to the top of the page I am on. But when at the top of the page, I am wanting this button to switch to another link that goes to the homepage.
Bonus Points: How would I change the text to also switch from "top" to "home"? I have not tackled this hurdle because I figured my issue with switching the href would correlate to this obstacle.
JS:
window.onscroll = function() { scrollFunction() };
function scrollFunction() {
document.getElementById("scroll-to-top-button").classList.toggle("show");
window.onclick = function(event) {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
window.location = "#top";
} else if(document.body.scrollTop = 0){
window.location.href = "https://homepage.html";
}
}
}
html:
<div class="fas fa-angle-up">top</div>
I have tried using window.scrollY instead of .scrollTop - but I have not touched scrolling elements prior to this. I am a little fuzzy with how to indicate if I have scrolled vs not scrolled. I do not know if my issue is because my if, else elements are not correct - or if it is something else?

Here's a small code snippet example to answer your question,
const anchor = document.querySelector('a')
window.addEventListener('scroll',() => {
if(window.scrollY > 100){
anchor.setAttribute('href', "#above")
anchor.innerText = "go above"
}else{
anchor.setAttribute('href', "#below")
anchor.innerText = "go below"
}
})
html{
scroll-behavior: smooth;
}
header{
background: white;
width: 100%
}
#above{
height:100vh;
width: 100%;
background: blue;
}
#below{
height: 100vh;
width: 100%;
background: green;
}
<header style="position:fixed">
go below
</header>
<section id="above"></section>
<section id="below"></section>
Here I am using setAttribute() to change the href attribute of anchor tag, and innerText to change that same anchor tag's text. I am using scrollY to check amount of window scrolled.
You could change the if(window.scrollY > 'change this value') according to your need

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

I wanna hide the paragraph content automatically when the window width is 980px or smaller .Any suggession?

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

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

How to override standard browser print and print an iframe by default

I have a documentation type page with an iframe inside. I'm trying to override standard browser print (Ctrl + p) to print contents of an iframe only.
I know how to print an iframe content using javascript:
window.frames['webcontent'].focus();
window.frames['webcontent'].print();
I know how to do run javascript before printing e.g. as described here: Check for when a user has selected to print using javascript
Any advise?
Thanks

It can be easily achieved through CSS: See thisJSfiddle: Tested
<style>
#media print{
body * {display:none;}
.toPrint{display:block; border:0; width:100%; min-height:500px}
}
</style>
Let an HTML File be:
<body>
<h3>I do not want this title Printed</h3>
<p> This paragraph should not be printed</p>
<iframe class="toPrint" src="http://akitech.org"></iframe>
<button onclick="window.print()">Print</button>
</body>

It's not possible (using Javascript). There is some experimental support for user-initiated print events in modern browsers, but those are not cancelable ("simple events") so the entire page will still print even if you interject custom code to print the frame of interest.
Given this limitation, your best bet is probably to offer users a large button that fires your custom frame printing function (see printContentFrameOnly below, fire it without arguments) and hope that they'll use the button instead of ctrl-p.
If it would be possible, this would be the way to do it (based on this answer):
// listener is a function, optionally accepting an event and
// a function that prints the entire page
addPrintEventListener = function (listener) {
// IE 5.5+ support and HTML5 standard
if ("onbeforeprint" in window) {
window.addEventListener('beforeprint', listener);
}
// Chrome 9+, Firefox 6+, IE 10+, Opera 12.1+, Safari 5.1+
else if (window.matchMedia) {
var mqList = window.matchMedia("print");
mqList.addListener(function (mql) {
if (mql.matches) listener(); // no standard event anyway
});
}
// Your fallback method, only working for JS initiated printing
// (but the easiest case because there is no need to cancel)
else {
(function (oldPrint) {
window.print = function () {
listener(undefined, oldPrint);
}
})(window.print);
}
}
printContentFrameOnly = function (event) {
if (event) event.preventDefault(); // not going to work
window.frames['webcontent'].focus();
window.frames['webcontent'].print();
}
addPrintEventListener(printContentFrameOnly);

The idea is to set the iframe content somewhere on the page, and print ONLY that content, by hiding the original content.
This can be done by getting the iframe content when Ctrl+P event is being initiated (via JavaScript), and print only its content (via CSS #media type).
HTML Code:
<div id="dummy_content"><!-- Here goes the iframe content, which will be printed --></div>
<div id="content_wrapper">
<div id="current_content">Current Content that the user see<div>
<iframe id="myIframe" src="iframe.html"></iframe>
</div>
CSS Code:
#media screen {
#dummy_content {
display:none; /* hide dummy content when not printing */
}
}
#media print {
#dummy_content {
display:block; /* show dummy content when printing */
}
#content_wrapper {
display:none; /* hide original content when printing */
}
}
JavaScript Code:
var dummyContent = document.getElementById("dummy_content");
function beforePrint() {
var iFrame = document.getElementById("myIframe");
dummyContent.innerHTML = iFrame.contentWindow.document.body.innerHTML; // populate the dummy content (printable) with the iframe content
}
document.onkeydown = function(e) {
if (e.ctrlKey && e.keyCode == 80) {
beforePrint();
}
}

You can define a css file for printing:
#media print {
* { display: none; }
iframe { display: block; }
}
EDIT
Mybad didnt tested it.
* { display: none; } is somehow overwriting all
But this is working like a charm
http://jsfiddle.net/c4e3H/
#media print {
h1, p{ display: none; }
}

The only way i can think of is hiding all the content in the document except for the iframe and making it fit the whole document.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
body.hide *, body #backdrop
{
display: none !important;
}
body.hide #my_print_iframe, body.hide #backdrop
{
background: white;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 0;
width: 100%;
height: 100%;
display: block !important;
}
#media print {
body.hide #backdrop
{
display: none !important;
}
}
</style>
<script>
$(document).on('keydown', function(e){
if (e.keyCode == 80 && ( e.metaKey || e.ctrlKey ) ) {
$("body").addClass('hide');
setTimeout(function(){
$("body").removeClass('hide');
},1000)
}
})
</script>
</head>
<body>
<div>
this is some visible text
</div>
<iframe id="my_print_iframe" src="//example.com"></iframe>
</body>
</html>
I used timeout ( nasty i know ) because at least chrome 38 does not send the keyup event after ctrl+p

Hi might be this code will help you..
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'printMe', 'height=400,width=600');
mywindow.document.write('<html><head><title>Print Me</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
and call the function PrintElem('iframe') on you page.