Have been trying to get $("#id1").add(); and $("#id2").remove(); to work inside the following function taken from this post. I am getting the $("#id2").remove(); to work from the console and I would like to get them both to work from inside this function as well.
(function($) {
var $window = $(window),
function resize() {
if ($window.width() < 801) {
$("#id1").add();
$("#id2").remove();
}
else {
$("#id2").add();
$("#id1").remove();
}
}
$window
.resize(resize)
.trigger('resize');
})(jQuery);
Alternately, is could get it to work using .addClass/.removeClass, but then it has to target all sub classes as well..
Media queries can be used to toggle the elements' visibility:
CSS
/* show id1, hide id2, when screen resolution is 800px or less */
#media screen and (max-width: 800px) {
#id1 {
display:block; /*or inline, or whatever */
}
#id2 {
display:none;
}
}
/* show id2, hide id1, when screen resolution is greater than 800px */
#media screen and (min-width: 801px) {
#id1 {
display:none;
}
#id2 {
display:block; /*or inline, or whatever */
}
}
But if they need to actually be added and removed from the DOM, then how about this
(function($) {
var $id1=$('#id1');
var $id1Parent=$id1.parent();
var $id2==$('#id2');
var $id2Parent=$id2.parent();
var $window = $(window),
function resize() {
$('#id1,#id2').remove();
if ($window.width() < 801) {
$id1Parent.append($id1);
}
else {
$id2Parent.append($id2);
}
}
$window
.resize(resize)
.trigger('resize');
})(jQuery);
display none is the way to go for these kind of situations.
The other way is to use JQuery but it will be quite messy if your code gets longer. Or you might want to use AJAX for loading the div part if the div codes are really long.
function resize() {
if ($window.width() < 801) {
$("<div id='1'></div>").appendTo('.container'); //add it to your container
$("#id2").remove();
}
else ......
}
Related
I am trying to call media queries through document.ready method. Here my aim is to call a media query after HTML content got loaded. Can anyone help? On this.
Example:
#media only screen and (min-width: 1200px){
.main_container {
width: 1200px;
}
}
You can use
$windowWidth = $(window).width();
This will give you size of the current screen. Then use conditions to add your css
if ($windowWidth >= 1200) {
$('.main_container').css('width', '1200px');
} else {
$('.main_container').css('width', 'auto');
}
I found a question/post on this site that works great upon first looking at it, until I need it to do more, and I have played with it and have not found a solution yet as to get it to do what I need it to do.
I am building a site for a client so I need it to be easy to operate in terms of if the client wants to change the actual order of things, so building a ul/li list on the back end within the theme is not an option, unless there is an easy way for me to modify the functions.php and change the way the menu tab is set up.
Here is my javascript coding, the menu is an actual wordpress menu.
jQuery(document).ready(function() {
jQuery("ul#menu-primary-items").find("li:contains('Home')").hide(); // hides home from navigation
var position = jQuery("ul#menu-primary-items li").length-1;
var i = 0;
jQuery('ul#menu-primary-items li').each(function() {
if(i == position/2) {
jQuery(this).after('the img src code is in here');
}
i++;
});
});
On full page width I need it to look like
Link | Link | Link | LOGO IMG | Link | Link |Link
On media width (the themes #media max-width is 999px) I need it to be a drop down style wordpress box with
LOGO IMG
WP "MENU" button
Link
Link
Link
Link
Link
Link
Instead of it displaying as the above, it shows as
WP "MENU" button
Link
Link
Link
LOGO IMG
Link
Link
Link
Check media in JQuery code, to set LOGO position:
jQuery(document).ready(function() {
jQuery("ul#menu-primary-items").find("li:contains('Home')").hide(); // hides home from navigation
var position = jQuery("ul#menu-primary-items li").length-1;
var i = 0;
/* check media here */
var isMedia999=false;
isMedia999 = (window.width() < 1000); //true if max width is <=999px
/* chek is done */
if( ! isMedia999)
jQuery('ul#menu-primary-items li').each(function() {
if(i == position/2) {
jQuery(this).after('the img src code is in here');
}
i++;
});
else jQuery('ul#menu-primary-items li').each(function() {
if(i == 0) { // <== first position if max width 999px
jQuery(this).after('the img src code is in here');
}
i++;
});
});
Of course this wont be actualized.refreshed on resize, so you could do:
jQuery(document).ready(function() {
myfunc();
windows.resize(myfunc());
});
function myfunc(){
jQuery("ul#menu-primary-items").find("li:contains('Home')").hide();
var position = jQuery("ul#menu-primary-items li").length-1;
var i = 0;
/* check media here */
var isMedia999=false;
isMedia999 = (window.width() < 1000); //true if max width is <=999px
/* chek is done */
if( ! isMedia999)
jQuery('ul#menu-primary-items li').each(function() {
if(i == position/2) {
jQuery(this).after('the img src code is in here');
}
i++;
});
else jQuery('ul#menu-primary-items li').each(function() {
if(i == 0) { // <== first position if max width 999px
jQuery(this).after('the img src code is in here');
}
i++;
});
});
}
Quite better: Use CSS and 2 logos.
1 logo is hidden for a media width > 999px, the 2nd is hidden for media <= 999px width.
#media max-width is 999px {
.logo#wide { display:none; }
.logo#tiny { display:inline; }
}
#media min-width is 1000px {
.logo#wide { display:inline; }
.logo#tiny { display:none; }
}
EDIT: JQuery :
jQuery(document).ready(function() {
jQuery("ul#menu-primary-items").find("li:contains('Home')").hide(); // hides home from navigation
var position = jQuery("ul#menu-primary-items li").length-1;
var i = 0;
jQuery('ul#menu-primary-items li').each(function() {
if(i == 0) {
//put logo tiny here for media maxwidth 999px
}
if(i == position/2) {
// put logo wide here for media minwidth 1000px
}
i++;
});
});
Does something like this could work ?
#media(max-width:whateveryouwant px)
{
.logo{
float:right;
}
}
An other approach would be to move the element threw the DOM.
You can achieve this with jQuery :
if((window).width() <= sizeYouWant){
$('.logo').insertBefore('#FirstElement');
}
I'll try to explain my use case here. In my site I have a break point for desktop view, and break point for tablet view (which is more compact). I'm trying to add a function to allow seeing the tablet view when browsing from desktop, cause some members prefer the compact design in their desktop as well.
For doing that, I figured I would need to trick the '#media(max-width:X)' query. I'm looking for a JS code that can manipulate the screen width value, so when the browser calculates max-width, it would be against a value that I specified.
One thing to note, this is suppose to work on desktop browsers, so the meta viewport can't be used here.
One solution is to apply a specific class (e.g: .tablet) to the body.
<body class="tablet"></body>
In your CSS:
#media screen and (/* your query */) {
.tablet .my-class {
/* tablet specific stuff */
}
}
You could then remove the .tablet class and replace it with .desktop via JavaScript
var body = document.body;
var switchToDesktop = function() {
body.className = body.className.replace('tablet', 'desktop');
}
var switchToTablet = function() {
body.className = body.className.replace('desktop', 'tablet');
}
var toggleView = function() {
(body.className.indexOf("tablet") > -1) ?
switchToDesktop() :
switchToTablet();
}
If you are using SASS or LESS, you can nest the tablet-specific styles.
#media screen and (/* your query */) {
.tablet {
h1 {
/* tablet specific h1 */
}
.my-div {
color: red;
}
/* etc... */
}
}
I have an img tag in the DOM.
<div class="some-div">
<img src="https://cdn0.iconfinder.com/data/icons/social-networks-and-media-flat-icons/133/Social_Media_Socialmedia_network_share_socialnetwork_network-09-128.png">
</div>
Now when the browser width become 768px (actually for the tab,smartphone) I need to change the src of the img tag. That means simply the image will be changed to a another one. Example:-
<div class="some-div">
<img src="https://cdn0.iconfinder.com/data/icons/social-networks-and-media-flat-icons/133/Social_Media_Socialmedia_network_share_socialnetwork_network-09-128.png">
</div>
Remember I cant use the background-image property in the css for some reason here so would not be able to write media-queries like this #media only screen and (max-width: 768px)
I need to change it via JS or anyhow. Can you help? Thanks a ton.
Remember I cant use the background-image property in the css for some reason here so would not be able to write media-queries like this #media only screen and (max-width: 768px)
If it's specifically that you can't use background-image, but you can use media queries, then:
#media (min-width: 769px) {
img.small {
display: none;
}
}
#media (max-width: 768px) {
img.big {
display: none;
}
}
...and in your markup:
<img class="big" src="/path/to/big/image.png">
<img class="small" src="/path/to/small/image.png">
If you can't use media queries at all, then:
<img data-big="/path/to/big/image.png" data-small="/path/to/small/image.png">
and
(function() {
var lastSizeAttr = null;
var list = document.getElementsByTagName("img"); // the list is live
var resizeTimer = 0;
window.addEventListener("resize", maybeResize);
function maybeResize() {
if (resizeTimer) {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(imageResize, 100); // Wait 100ms
}
function imageResize() {
var attr = favorite_width_prop_here < 769 ? "data-small" : "data-big";
var img;
var n;
resizeTimer = 0;
if (attr !== lastSizeAttr) {
lastSizeAttr = attr;
for (n = 0; n < list.length; ++n) {
img = list[n];
img.src = img.getAttribute(attr);
}
}
}
})();
...or similar at the end of your HTML (so the elements are there to be found by getElementsByTagName). Note the favorite_width_prop_here, I don't immediately recall which property to use if you're not using jQuery. :-)
You need to calculate the width of window size.
function calculateWidth(){
if(window.outerWidth <= 768){
var imgTag = document.getElementElementById('someImage');
imgTag.src = "imageForTab.jpg"; //here your small image would be for tab
}
}
//attaching the function on window resize
window.addEventListener('resize', calculateWidth);
<body onload="calculateWidth()"> //calling the function on body onload
Pleae put id on your image tag.
<img id="someImage" src="https.....
This is handeling only the image which is given with this id ('someImage').
Using jQuery/jQueryMobile, I have a link as follows:
<a href="index.html" id="HomeLink" data-role="button" data-mini="true" data-icon="home" data-iconpos="top" >Home</a>
I am trying to test various screen sizes, and if the screen width is less than 300px, I want to change:
data-iconpos="top"
to
data-iconpos="notext"
so I only get the icon. I have tried to do it with JavaScript:
var hl = document.querySelector('#HomeLink');
if ($(window).width() < 300) {
hl.setAttribute("data-iconpos", "notext");
} else {
hl.setAttribute("data-iconpos", "top");
}
But it won't work.
Question: can it be done in CSS instead.
If not: how can it be done in JavaScript?
You can't really set a data attribute with CSS as far as I know, but since you're already using jQuery, why not try it all the way :
$('#HomeLink').data('iconpos', ($(window).width() < 300 ? 'notext' : 'top') );
Remember to wrap that in document ready!
You can do this way altering your code:
var hl = $('#HomeLink');
if ($(window).width() < 300) {
hl.data("iconpos", "notext");
} else {
hl.data("iconpos", "top");
}
with .attr():
var hl = $('#HomeLink');
if ($(window).width() < 300) {
hl.attr("data-iconpos", "notext");
} else {
hl.data("data-iconpos", "top");
}
Try to wrap the code in window resize event, eg:
$(window).resize(function () {
check();
})
$(function () {
check();
})
function check() {
if ($(window).width() < 300) {
$('#HomeLink').attr('data-iconpos', 'notext');
} else {
$('#HomeLink').attr('data-iconpos', 'top');
}
}
I would like to suggest using a different approach.
The data-iconpos="top" looks a bit out of place to me here. I have a feeling (perhaps I'm wrong) that you're attempting to inline your styling into the HTML.
Why not try media queries?
#media screen and (max-width: 300px) {
#HomeLink {
/* styling for HomeLink when screen width is less than 300px */
}
}
This is a CSS-only solution. It works if the user decides to resize the screen after the page has loaded. Try resizing the "Result" frame in this jsfiddle and notice the color of the link changing.
Suggested reading:
http://alistapart.com/article/responsive-web-design
https://developer.mozilla.org/en-US/docs/CSS/Media_queries
And here are the docs on media queries: http://www.w3.org/TR/css3-mediaqueries/
Warning: mind ahem, IE below 9, ahem...