I am making a website in HTML/PHP. I want the images to be different sizes depending on if your viewing on a mobile or PC. Weird part is on one of my pages both properties update the image on the screen when I type into the console, I forgot to add footer image related to pages that use the same image as a footer with the id footerimage.
Here is the HTML
<body onload="detectClient()">
<header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">
<img class="w3-image" src="img/Websitebackground.png" alt="logo" width="1500" height="1000" id="headerimage">
</header>
...
and here is the javascript:
function detectClient() {
if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ){
console.log(navigator.userAgent);
document.getElementById("footerimage").width = "1500";
document.getElementById("footerimage").height = "1000";
} else {
console.log(navigator.userAgent);
document.getElementById("headerimage").style.width = "1500";
document.getElementById("headerimage").style.height = "450";
console.log(console.error());
console.log(document.getElementById("headerimage").height)
The console logging is for me to see in console if that code is executing correctly. I have thrown a jsfiddle together should work okay.
https://jsfiddle.net/9frpzy0k/
What's the reason for no using jQuery nowadays? Some things works better and probably in future you'll find also other advantages. Note I didn't verify if your if statement works for mobile.
On the other hand. resizing image doesn't crop it, but just resizes, which may look kinda ... weird. Instead, I suggest using background image that fits the div container using vanilla CSS. Using this approach you can simulate crop solution with pure CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">
<img class="w3-image" src="https://placem.at/things?w=1500&h=1000&random=image_1&txt=Image+1500+1000" alt="logo" width="1500" height="1000" id="headerimage">
</header>
<script>
$(document).ready(function () {
let $headerImage = jQuery('#headerimage');
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
console.log(navigator.userAgent, 'mini');
$headerImage.width(1500);
$headerImage.height(1000);
} else {
console.log(navigator.userAgent, 'else statement');
$headerImage.width(1500);
$headerImage.height(450);
}
});
</script>
</body>
</html>
post scriptum
Also this should work in your code
let img = document.getElementById("headerimage");
img.style.width = '1500px';
img.style.height = '450px';
or
img.width = 1500;
img.height = 450;
Related
I use iframes on most my projects. They embed things ranging from ads to sponsors to announcements. Allot of people have contacted me asking why the pages take so long to load, and I simply reply "technical issues". The actual pages content loads, it just stays loading. I also use some iframes with 0 width and height with no frameborder.
I am trying to make the page say its loaded, but load the iframe in the background. I have searched everywhere and not found an answer. The closest I have found is how to make the iframe the lowest priority in loading time.
I have tried this:
(function(d){
var iframe = d.body.appendChild(d.createElement('iframe')),
doc = iframe.contentWindow.document;
// style the iframe with some CSS
iframe.style.cssText = "position:absolute;width:200px;height:100px;left:0px;";
doc.open().write('<body onload="' +
'var d = document;d.getElementsByTagName(\'head\')[0].' +
'appendChild(d.createElement(\'script\')).src' +
'=\'\/path\/to\/file\'">');
doc.close(); //iframe onload event happens
})(document);
I have tried this:
$(window).bind("load", function() {
$('#backup').prepend('<iframe src="https://web.archive.org/save/https://ppyazi.com/" width="0" height="0"></iframe>');
});
$(window).bind("load", function() {
$('#uggaustraliancollection').prepend('<iframe src="https://web.archive.org/web/20180314120100/https://www.instagram.com/uggaustraliancollection/" width="100%" height="400"></iframe>');
});
$(window).bind("load", function() {
$('#zuper').prepend('<iframe src="https://ppyazi.com/zuper/wall.php?username=quix" width="0" height="0"></iframe>');
});
<a href="https://www.instagram.com/uggaustraliancollection/" class="list-group-item list-group-item-action">
<?php $total = file_get_contents('stats.php') + 0.0001;
?>
<div id="uggaustraliancollection"></div>
<script type="text/javascript" src="//ylx-1.com/bnr.php?section=General&pub=315858&format=300x50&ga=g&mbtodb=1"></script> <noscript><img alt=" " src="//ylx-aff.advertica-cdn.com/pub_2hpya3.png" style="border:none;margin:0;padding:0;vertical-align:baseline;" /></noscript>
<span class="badge badge-dark">Advertisment</span>
</a>
Since you indicated that none of the linked answers worked, here is a snippet that I have tested and works for me. Putting up a target div, I use a jQuery script to append a whole iframe to its contents on page load.
In HTML
<div id="cool_thing"></div>
In jQuery script:
$(window).bind("load", function() {
$('#cool_thing').prepend('<iframe src="https://www.weather.gov/" width="680" height="380"></iframe>');
});
This is working starting point. I can imagine combining this with a static image that is replaced/removed when the function is running, and it will be hard to tell the difference.
I think this is what you want.
For multiple iframes:-
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body onload="iframeload()">
<iframe id="iframe1"></iframe>
<iframe id="iframe2"></iframe>
<script>
function iframeload() {
var iframe = document.getElementById("iframe1");
iframe.src = "pagename1.html";
var iframe = document.getElementById("iframe2");
iframe.src = "pagename2.html";
}
</script>
</body>
</html>
Single iframe:-
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body onload="iframeload()">
<iframe id="iframe"></iframe>
<script>
function iframeload() {
var iframe = document.getElementById("iframe");
iframe.src = "pagename.html";
}
</script>
</body>
</html>
I am trying to figure out how to redirect img thumbnail to corresponding img on new html page.
For example : http://www.damondebacker.com/music.html
this page contains overview of all pictures
http://www.damondebacker.com/musicd.html
this page contains scrolldown + column with large picture
I want to know how I can link every image to the scrolldown/large picture pages so it opens on the clicked image.
I have found this so far :
$(document).ready(function() {
"use strict";
$('img.musicd').click(function() {
window.location.href = this.class +'.html' ;
});
});
Which doesn't work.. And I know I need to integrate somehow
$( ".images" ).hide();
$( "#een" ).show();
With #een being the id of the image that opens when the musicdd page opens.
I am relatively new to javascript and I'm looking for the best possible way to explain this problem. Hope anyone can give me advice?
Try this. I kept it as simple as possible. My code uses jQuery. Here you are:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="thumbnails">
<img src="one.jpg" alt="...">
<img src="two.jpg" alt="...">
<img src="three.jpg" alt="...">
</div>
<img src="" alt="..." id="main">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function () { // I wait the DOM loading
$("#thumbnails img").on("click", function () { // when I click a thumbnail
var x = $(this).attr("src"); // I save its src attribute
$("#main").attr("src", x); // and use it as the src of the #main image
});
});
</script>
</body>
</html>
i am a newbee so sorry if my question is basic.
i have written a code (with the help of the forum offcourse) where by clicking on an image another one appears and when you click on the new one, again another one appears and so on.
the problem is i can not add an style to the code and make the images appear in different positions to make a layout.
can anyone here help me?
thank you so much
<meta charset="utf-8">
<title> COOPER BLACK </title>
<link rel="stylesheet" type="text/javascript" href="style.css" media="screen">
</head>
<div class="container">
<script type="text/javaSCRIPT">
var i = 1
function imageClick() {
if (! this.alreadyClicked)
{
addimage();
counter();
this.alreadyClicked = true;
}
}
function addimage() {
var img = document.createElement("img");
img.src = "images/d"+i+".jpg";
img.onclick = imageClick;
document.body.appendChild(img);
}
function counter() {
i = i + 1
}
</script>
<div class="first">
<input class="first" type="image" src="images/d0.jpg" onclick="imageClick();">
</div>
</div>
Try setting the class attribute this way
img.setAttribute("class", "YourClassName");
Then apply the style to YourClassName in a CSS file/style tag. (Might also want to call the script after you load the CSS) Like so
.YourClassName { /* style here */ }
Edit:
You can also check if the elements are rendered well (the HTML tags have the class names and onClick methods) using the console (press F12 on the page)
I am trying to duplicate Expanding Text Areas Made Elegant
Basically it explains how we can achieve something like fb comment box, where its size increases as text files the textarea.
I have this in my index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="test.js"></script>
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
</body>
</html>
And my test.js looks like:
This doesn't really works.
However if I move everything inside the js file to a script tag inside body then it works fine. So my index file would look like:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
<script>
function makeExpandingArea(container) {
var area = container.querySelector('textarea');
var span = container.querySelector('span');
if (area.addEventListener) {
area.addEventListener('input', function() {
span.textContent = area.value;
}, false);
span.textContent = area.value;
} else if (area.attachEvent) {
// IE8 compatibility
area.attachEvent('onpropertychange', function() {
span.innerText = area.value;
});
span.innerText = area.value;
}
// Enable extra CSS
container.className += ' active';
}var areas = document.querySelectorAll('.expandingArea');
var l = areas.length;while (l--) {
makeExpandingArea(areas[l]);
}
</script>
</body>
</html>
You're not actually using onload
Your formatting is so messed up it's hard to tell, but your init code is in a while loop at the bottom after your onload function.
When you include it in the <head> it runs before any elements exist. That's why the position of it matters.
In your browser(I recommend Chrome for testing) open up the developer tools(via right click and selecting inspect element) and make sure your test.js file's path is correct. Do this by selecting the 'Sources' tab on the top of the developer tools window and then selecting the test.js file on the list of sources.
I also consider it best practice to load your js files at the bottom of your web documents(before the last body tag) to guarantee they load AFTER your dom elements load.
try this in your code:
I have used inside a table andapply a css class "form-control". The properties of this text areas are in side tag in side
html code:
<html>
<body>
<table>
<tr>
<td>Description:</td>
<td><textarea name="DESCRIPTION" id="DESCRIPTION" class="form-control"></textarea></td>
<td></td>
</tr>
</table>
//css-code required inside html:
<style>
textarea.form-control {
height: auto;
resize: none;
width: 300px;
}
</style>
</body>
</html>
I've been trying to figure how to create an idea I had the other day for awhile now and can't seem to get it to work due to being a bit of noob still.
Anyway, to the point, I am trying to create as the title says, a paragraph where the user can simply click on the text / paragraph and have the font size increase each time.
I was able to get a working form where I could put in a multiple choice box and have the users change size with that, but that simply isn't what I want to do..
I was thinking it would look something like this:
<script type="text/javascript" language="javascript">
do
{
if (user-clicks) increase font size;
else keep current font size;
}
while (font-size < 4em)
</script>
Can anyone more experienced please help me getting this to work or at least put me on a path where I can more successfully figure it out myself? Thanks in advance for any help!
<html>
<head>
<script language="javascript">
function resizeText(multiplier) {
multiplyText(multiplier, document.getElementById('myContent'));
}
function multiplyText(multiplier, txtobj) {
//keep current font size
if (txtobj.style.fontSize == '') {
txtobj.style.fontSize = "100%";
}
//keep current font size
if (multiplier == 0) {
txtobj.style.fontSize = "100%";
}
else { //get only the number part of the fontsize
txtobj.style.fontSize = parseFloat(txtobj.style.fontSize) + multiplier + "%";
}
}
</script>
</head>
<body>
<p id="myContent">
Increase font</p>
</body>
</html>
Working Code with JQuery:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
var gFont=1;
$('.fontAuto').click(function(e) {
if(gFont<4){
gFont=gFont+0.5;
$('.fontAuto').css('font-size',gFont+'em');
}else{
gFont =1;
$('.fontAuto').css('font-size','1em');
}
});
});
</script>
<style type='text/css'>
.fontAuto{
font-size:1em;
}
</style>
</head>
<body>
<p class="fontAuto">Text For testing</p>
</body>
</html>
Giving you a very short & simple answer-
<p id=p1 style="font-size:25">
click here to enlarge.
</p>
In case you want to do it on click at any part of the <p>...</p> tag use-
<p id=p1 style="font-size:25" onclick="this.style.fontSize=50">
click to enlarge.
</p>
Customize it as you wish.