I'm trying to change the size of the browser according to the size of the display using JQuery however it does not seem to work currently.
HTML Code:
<head>
<link rel="stylesheet" type="text/css" href="SmallDesktopScreen.css">
<link id="newSize" rel="stylesheet" type="text/css" href="LargeScreen.css">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function adjustStyleSheet(width){
width= parseInt(width);
if ((width>=1352)&&(width<=1880)){
$("#newSize").attr("href", "css/SmallDesktopScreen.css");
}
else if(width>1881){
$("#newSize").attr("href", "css/LargeScreen.css");
}
}
<!-- 1352 1881 -->
$("document").ready(function(){
$(function() {
adjustStyleSheet($(this).width());
$(window).resize(function() {
adjustStyleSheet($(this).width());
});
});
});
it is possible to switch stylesheets using jquery.
for example
var stylesheets = ['style1.css','style2.css'];
var primary_sheet = 0;
if(primary_sheet === 0) {
$('link').attr('href',stylesheets[0]);
else {
$('link').attr('href',stylesheets[1]);
}
Changing some of your scripts will do the trick.
First of all you cannot, get the link element and set href(which will eventually not work in all the browsers). But you can create one easily.
Check the script code below. This will work.
function adjustStyleSheet(width){
width= parseInt(width);
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = "";
link.rel = 'stylesheet';
link.type = 'text/css';
link.media = 'all';
var linkHref = "css/SmallDesktopScreen.css";
if ((width>=1352)&&(width<=1880)){
linkHref = 'css/SmallDesktopScreen.css';
}
else if(width>=1881){
linkHref = 'css/LargeScreen.css';
}
link.href = linkHref;
head.appendChild(link);
}
<!-- 1352 1881 -->
$("document").ready(function(){
$(function() {
adjustStyleSheet($(window).outerWidth());//OuterWidth gets the width of your original screen size not the window size alone.
$(window).resize(function() {
adjustStyleSheet($(window).outerWidth());
});
});
});
It is good doing stuffs in Javascript or jQuery. But I will support #media queries in CSS for responsive kind of works, which is very easy actually.
Related
I'm creating an image gallery and I need to know the size of the div containing the image or the image itself after it loads. How can I get that? I've tried everything but it gives me the size of the DIV before it loads, which is 1px X 1px.
Basically everything is hidden, you click a link and the image displays, so the div goes from 1px by 1px to for example, say 419px by 1000px. How do I get that final size after the DIV or Image loads? the size can change depending on the device used and the image loaded. Is there anyway to get this information using just JavaScript?
Here's the function. If possible I would like to get the height of the image or the DIV after the image loads in the same function.
here's the function that i am testing
function ShowArt(nam,imgs,)
{
var currentPosition = parseInt(movingDivObj.style.top);
var scrollPos = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
movingDivObj.style.top = currentPosition + scrollPos + "px";
movingDivObj.style.display = "block";
document.getElementById("close").style.display = "block";
document.getElementById("selectedart").style.display = "block";
document.getElementById("artname").style.display = "block";
document.getElementById("background").style.display = "block";
display.src = imgs;
document.getElementById("artname").textContent= nam;
scrollPosition = window.pageYOffset;
document.body.style.position = "fixed";
document.body.style.top = `-${scrollPosition}px`;
}
Thanks!
Try using this DOM event listener, in the callback function you can write the necessary code to get your value I presume:here
In the same way that the "load" event works for the body, it works for images. So you could attach an "load" event on the image and when it triggers, measure the width/height.
const img = document.querySelector('#img')
img.addEventListener('load', (event) => {
console.log('width', event.target.width)
console.log('height', event.target.height)
})
img.src = 'https://via.placeholder.com/900x1000'
Have you tried:
<script>
var myImg = document.getElementById('image');
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
console.log(realWidth);
</script>
Solution 1:
Use this Solution in your JS file
JavaScript:
window.onload = () => {};//enter the code that gets the image or divs width and height in the {} brackets`
The window.onload function waits till the DOM is loaded and then executes a function. It is used mostly when you need to get default values from a predefined and static element.
Further Readings: https://www.w3schools.com/jsref/event_onload.asp
Solution 2:
NOTE: Use this only if you are using a 'script' tag to use the JS code in your HTML.
Use the script tag at the end of your HTML document
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--Your code goes here-->
<script src="myScript.js"></script>
</body>
</html>
Thanks guys I appreciate all the help. I finally found an answer that worked though I got some great ideas. The answer was to have the images preload and when I did that it gave me the height of the image I needed for the next steps. Again thanks very much! I appreciate it. The code I used for this is below. After the images are preloaded I am able to get the width / height of the images so they work in the gallery as planned. It worked like a charm.
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"Photos/AloneInTheStorm.jpg",
"Photos/deepinthought.jpg",
"Photos/68degrees.jpg",
"Photos/forgotten.jpg",
"Photos/babylycan2.jpg",
"Photos/americancoot.jpg"
)
Following this previous question JQuery distinct between smartphones, tablet or computers with different sizes but the same $(window).width() I now that I know the real sizes from the devices I use thank to window.screen.width , I would like to use one CSS file or another depending of this size, like for example:
<script>
var w = window.screen.width;
if(w < 800){
//I should include somehow this <link href="{{ asset('assets/css/firstCSS.css') }}" type="text/css" rel="stylesheet">
} else {
//Adding the second CSS file... <link href="{{ asset('assets/css/secondCSS.css') }}" type="text/css" rel="stylesheet">
}
</script>
I know this code looks horrible but I'm not able to get a solution.
(Edited)It is possible to use a css file depending on a value from JavaScript? Don't answer me yes... and show me how please.
Yes of course you can do it:
Create a new link element.
Give it a href based on your variable.
Append this link to the head of the document.
This is how should be your code.
var w = window.screen.width;
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
if (w < 800) {
link.href = "{{ asset('assets/css/firstCSS.css') }}";
} else {
link.href = "{{ asset('assets/css/secondCSS.css') }}";
}
document.head.appendChild(link);
I'm trying use to a Conditional CSS loading technique found here but I cannot get this to work. The code can be found below (I've stripped out some parts for clarity) here is live link.
The media queries do not apply when the screen is stretched above 650px. The idea is use conditional loading to prevent downloading unnecessary CSS files.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" class="mediaquerydependent"
data-media="screen and (min-width: 300px)"
data-href="styles/stylemin300.css">
<link rel="stylesheet" class="mediaquerydependent"
data-media="screen and (min-width: 650px)"
data-href="styles/stylemin650.css">
<script type="text/javascript" src="js/mediamatch.js">
</head>
<body>
<h2>HELLO</h2>
</body>
</html>
Here is the JavaScript:
(function(){
var queries = document.
querySelectorAll('.mediaquerydependent'),
all = queries.length,
cur = null,
attr = null;
while (all--) {
cur = queries[all];
if (cur.dataset.media &&
window.matchMedia(cur.dataset.media).matches) {
for (attr in cur.dataset) {
if (attr !== 'media') {
cur.setAttribute(attr, cur.dataset[attr]);
}
}
}
}
}());
im trying to make the iframe gradually grow onclick from the link(link being the center point). its going to be the size of the link then grow to the size of the iframe. there will be other links so they will have the same effect. any ideas? sorry im a newbie
<html>
<head>
<link rel="stylesheet" href="Css/style.css" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript">
function makeFrame(src) {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("onmouseout","closeFrame()")
ifrm.setAttribute("src","");
ifrm.style.display = "block";
ifrm.style.width = "640px";
ifrm.style.height = "400px";
ifrm.style.marginLeft = "325px";
ifrm.style.marginTop = "125px";
ifrm.style.position = "absolute";
ifrm.style.top="0px";
ifrm.style.color="red";
ifrm.style.zIndex= "101";
document.body.appendChild(ifrm);
}
function closeFrame(){
ifrm.style.display = "none";
}
</script>
</head>
<body>
<img src="" onclick=makeFrame() height="100px" width="100px" />
</body>
</html>
you could create another function that animates the desired behavior, i.e. something that adds small increments to the height and width of your iframe.
<script>
function grow () {
ifrm = document.getElementById('amazingIFrame');
if (ifrm.style.width < 500) {
ifrm.style.width += 10;
} else {
clearInterval(interval); // stop growing when it's big enough
}
}
function startGrow() {
makeFrame(src); // create the frame first
interval = setInterval("grow()", 10); // grow every 10 ms
}
</script>
Then you could have
<img onClick="startGrow();">
somewhere in your document.
You might also have to adjust the position as it grows so that it stays centered, but the idea is there.
It sounds like you're trying to have a box open up when a user hovers over a link. There are better ways of doing this than an iframe, such as a div with dynamically loaded content.
I have built a javascript/css dependency manager similar to http://code.google.com/p/jingo/.
It allows me to do something like this:
Loader.DependsOn(['/scripts/jqueryui.js', '/scripts/jquery.js'])
.Css('/css/jquery.css')
.Execute(function() { //Insert script here});
Loader will dynamically load both the script and the css before executing (if they haven't been loaded already).
Everything is working, except in IE. The style sheets are loaded by appending a link to the head of the document. However, before doing this, the loader looks to see if the requested css file is itself dependent on another module. If it is, it will figure out where in the order of CSS files it should be inserted. In all browsers except IE, if I insert it at the beginning of the list, any other stylesheets after will override it's styles (intended behavior). In IE, however, although it is inserted at the beginning, IE treats it as if it were at the end.
Is there a way to force IE to recompute styles?
UPDATED WITH TEST CASE:
Create two styles sheets, sheet1.css, sheet2.css
sheet1.css
.testdiv
{
width:200px;
height:200px;
background-color:#c7c7c7;
}
sheet2.css
.testdiv
{
width:400px;
height:400px;
}
markup:
<html>
<head>
<link href="style1.css" rel="stylesheet" "type="text/css" />
</head>
<body>
<div class="testdiv">
</div>
</body>
</html>
<script type="text/javascript" language="javascript>
setTimeout(function() {
var link = document.createElement('link');
link.href = 'sheet2.css';
link.rel = 'stylesheet';
link.type = 'text/css';
var head = document.head || document.getElementsByTagName('head')[0];
head.insertBefore(link, head.children[0]);
setTimeout(function () {
//suggestion from Simon West
document.body.className = document.body.className;
}, 3000);
}, 3000);
</script>
What should happen:
Gray box 200px by 200px. After 3 seconds, it's still there. No change.
What happens on IE8
Gray box 200px by 200px. After 3 seconds, it grows to 400px by 400px.
What happens on Safari (windows) -
Gray box 200px by 200px. After 3 seconds, it's still there. No change.
This occurs with or without #Simon West's suggestion.
<html>
<head>
<link href='sheet1.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class='testdiv'></div>
<script type='text/javascript'>
setTimeout(function() {
var link = document.createElement('link');
link.href = 'sheet2.css';
link.rel = 'stylesheet';
link.type = 'text/css';
var head = document.getElementsByTagName('head')[0];
head.insertBefore(link, head.children[0]);
var docElem = document.documentElement,
docElemNext = docElem.nextSibling;
document.removeChild(docElem); // this will clear document.styleSheets
document.insertBefore(docElem, docElemNext);
}, 500);
</script>
</body>
</html>
The following JS snippet should force a reflow/repaint of the entire page.
document.body.className = document.body.className;