I am building a breadcrumb structure and the elements are getting large.
I would like to hide several breadcrumbs when the size of the breadcrumbs is bigger than the available size. Which command can i use to check if the size of a div is greater than the available space. I have tried to capture an overflow event but this did not work. The .width on my div always return the full size of the screen although when i debug in chrome is says a smaller value...
any help is much appreciated.
Thanks
Edit:
function trimBreadcrumbs()
{
var x = document.getElementById("mnav-emtUl");
var width = x.offsetWidth;
alert(width);
}
this return the full width of the screen although in google chrome it says 200px...
<p id="demo">Click the button to display this window's height and width (NOT including toolbars and scrollbars).</p>
<button onclick="myFunction()">Try it</button>
function myFunction()
{
var w = window.innerWidth;
var h = window.innerHeight;
x = document.getElementById("demo");
x.innerHTML="Width: " + w + " Heigth: " + h;
}
if you didn't set width, it is inherited as width=100%. So this is absolutly correct. Set display:inline-block; for you're breadcumb navigation and it will return the real size.
Related
I was trying to make a mini image editor with a width and height function. The image should keep getting more wide after button is clicked. I tried debugging with printing the width in the console and it did but the image didn't get wider. I also tried many other variations and all of them didn't work.
so, here is my code:
function go1(){
setInterval( function() {document.getElementById("testimage").style.width + 10}, 250)
}
Your first problem is that while you are calculating a new width, you are aren't setting the new width in your code.
The second problem is that IMG tags don't use the width style. Instead, they have a width attribute
function go1(){
setInterval( function() {
var im = document.getElementById("testimage");
var newWidth = (im.getAttribute("width") ? im.getAttribute("width") : 0) + 10;
im.setAttribute("width", newWidth);
}, 250)
}
so I try to get the width of the device using jquery I made responsive website with 2 interface for laptop and mobiles but the problem is it doesn't work in mobile even the dimension of the div test was out of size in mobiles please help me the code that I use for redirecting is below with comments
<html>
<head>
<script src="./js/jquery-3.2.1.js"></script>
</head>
<body>
<div id='test' style=" width: 2.54cm; height:2.54cm;"></div>
//this div dimension works on laptop it measure exactly 2.54cm or 1nch
//using ruler but in mobiles it shrink and out of measure
<script>
//as you see I get the width of the div to get the pixel per inch
var sqw=$('#test').width();
var sqh=$('#test').height();
//and I get the total width of the document
var dheight=$(document).height();
var dwidth=$(document).width();
var w=dwidth/sqw;
//and I divide the total width of the document to pixel per inch
//the problem is the mobile show 10.98 inch where the mobile I use is
//miniFlare S5 cherrymobile with width of just 2.5 inches
if(w<=7) {
window.location.replace("./m_index.php");
} else {
window.location.replace("./d_index.php");
}
</script>
</body>
</html>
Your are using jQuery. From the docs .width() they say:
This method is also able to find the width of the window and document.
// Returns width of browser viewport
$( window ).width(); // <- this is the one you are looking for!
// Returns width of HTML document
$( document ).width();
var dwidth = window.innerWidth;
var dheight = window.innerHeight;
would do the job
You can get cross platform using the following script:
const w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
const h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
please try below code, it may satisfy your requirement
<script>
getScreensize(){
var sqw=$("body,html").width();
if(sqw<768){
//mobile screen logic
}
else{
//desktop screen logic
}
}
$(window).resize(function(){
getScreensize();
})
</script>
Hello I'm trying to adjust the size of youtube videos in my web. I want them to be responsive that I'm using jquery to do that. I have done it successfully but the thing is I want the height of youtube video to be decreased. Right now, it's too big. When I try to do it, the responsiveness feature is removed. Can you check how I can decrease the size of the video and keep the responsiveness?
<script>
function update_iframe_size(){
var parent_id = $("iframe").parent().attr("id");
if (parent_id == "main_video") {
var parent_class = $("iframe").parent().attr("class");
var parent_width = $("iframe").parent().width();
console.log(parent_class);
var width = $("iframe").css("width"); // $("iframe").width();
var height = $("iframe").css("height");
var ratio = parseInt(height)/parseInt(width);
var new_height = parseInt(parent_width) * ratio
$("iframe").css("width", parent_width);
$("iframe").css("height", new_height);
}
}
update_iframe_size()
$(window).bind("resize", function(){
// alert("reized");
update_iframe_size();
});
</script>
I tried to decrease the height that I did $("iframe").css("height", new_height*0.7);
but then the height is set to the one I want. However responsiveness gets messed up.
Refer following link: iFrame always take height and width 100% depends on parent div/element which is position relative.
http://jsfiddle.net/masau/7wrhm/
The problem
I'm using javascript to calculate widths of elements to achieve the layout I'm after. The problem is, I don't want to load the code on smaller screen sizes (when the screen width is less than 480px for example). I'd like this to work on load and on browser/viewport resize.
I'd consider small screen devices 'the default' and working up from there. So, none of the following script is called by default, then if the browser width is greater than 480px (for example), the following script would be called:
The code
$(document).ready(function() {
//Get the figures width
var figure_width = $(".project-index figure").css("width").replace("px", "");
//Get num figures
var num_figures = $(".project-index figure").length;
//Work out how manay figures per row
var num_row_figures = Math.ceil(num_figures / 2);
//Get the total width
var row_width = figure_width * num_row_figures;
//Set container width to half the total
$(".project-index").width(row_width);
x = null;
y = null;
$(".project-index div").mousedown(function(e) {
x = e.clientX;
y = e.clientY;
});
$(".project-index div").mouseup(function(e) {
if (x == e.clientX && y == e.clientY) {
//alert($(this).next().attr("href"));
window.location.assign($(this).next().attr("href"));
}
x = y = null;
});
});
// Drag-on content
jQuery(document).ready(function() {
jQuery('#main').dragOn();
});
The extra bit
The slight difference on larger screens is to do with the browser/viewport height. This is in regards to the line:
var num_row_figures = Math.ceil(num_figures / 2);
You can see once the calculation has a value, it divides it by 2. I only want this to happen when the browser/viewport height is above a certain amount - say 600px.
I'd be happy with this being the 1st state and then the value is divided by 2 if the height is greater than 600px if it's easier.
Can anyone help me/shed some light on how to manage my script this way. I know there's media queries for managing CSS but I can't seem to find any resources for how to manage javascript this way - hope someone can help.
Cheers,
Steve
You can use window.matchMedia, which is the javascript equivalent of media queries. The matchMedia call creates a mediaQueryList object. We can query the mediaQueryList object matches property to get the state, and attach an event handler using mediaQueryList.addListener to track changes.
I've added an example on fiddle of using matchMedia on load and on resize. Change the bottom left pane height and width (using the borders), and see the states of the two queries.
This is the code I've used:
<div>Min width 400: <span id="minWidth400"></span></div>
<div>Min height 600: <span id="minHeight600"></span></div>
var matchMinWidth400 = window.matchMedia("(min-width: 400px)"); // create a MediaQueryList
var matchMinHeight600 = window.matchMedia("(min-height: 600px)"); // create a MediaQueryList
var minWidth400Status = document.getElementById('minWidth400');
var minHeight600Status = document.getElementById('minHeight600');
function updateMinWidth400(state) {
minWidth400Status.innerText = state;
}
function updateMinHeight600(state) {
minHeight600Status.innerText = state;
}
updateMinWidth400(matchMinWidth400.matches); // check match on load
updateMinHeight600(matchMinHeight600.matches); // check match on load
matchMinWidth400.addListener(function(MediaQueryListEvent) { // check match on resize
updateMinWidth400(MediaQueryListEvent.matches);
});
matchMinHeight600.addListener(function(MediaQueryListEvent) { // check match on resize
updateMinHeight600(MediaQueryListEvent.matches);
});
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
So i searched a bit and came up with this example from w3 schools .http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media_example1
i think this is something you are trying to achieve.
For pure js , you can get the screen width by screen.width
what i need to achieve is the following:
a webpage for smartphone that contains a series of divs with heights, paddings, margins, etc.. and one particular div at the bottom that should be as high as the (window.innerHeight minus all the other divs' heights before him) so that the javascript can stick a fixed height to it (which has to be dynamic because i don't know the device screen height) and i can set via CSS overflow:auto and make it scrollable.
the js i started using is the following:
(function() {
function resize(delta) {
var heights = window.innerHeight;
jQuery('.dynamic-height').css('height', (heights - delta) + "px");
}
if (navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i)) {
resize(20);
} else {
resize(0);
}
})();
you can ignore the if/else statement.
here is a very simple fiddle: http://jsfiddle.net/omegaiori/k56wj/
the div that has to have the dynamic height is div.dynamic-height (violet background).
thank you so much for your help, this would be a life saver! :)
Try this,
Demo
(function() {
function resize() {
total = 0;
jQuery('.cont div').each(function(){
total += parseInt($(this).css('margin-top').split('px')[0])+parseInt($(this).css('margin-bottom').split('px')[0])+$(this).height()
});
var heights = window.innerHeight;
var dy_height = heights-total
jQuery('.dynamic-height').css('height', dy_height + "px");
}
resize()
})();