<script type="text/javascript">
$(document).ready(function(){
$(window).resize(function() {
if($(window).width() < 767){
$("#second").insertBefore("#first"); }
else{
$("#first").insertBefore("#second"); }
});
});
</script>
I want to change the html element. In the above code nothing is wrong but when our screen size has already small (< 767) it will not work due to resize() function and when we remove resize function then it will work but it failure when we increase the screen size. It can't change the element.
Actually i am looking a solution like #media css property. We all Know when we use media we can see the effect through inspector. I got a code but it will not working
document.querySelector('style').textContent += "#media screen and (max-width:767px) {"+
$("#second").insertBefore("#first");+" }";
Actually the code was not same. I edited and try to run but not working.
How to change elements like in small screen with media query? or any other solution but must be responsive
<script type="text/javascript">
$(document).ready(function(){
$(window).resize(function() {
change();
});
change();
});
function change(){
if($(window).width() < 767){
$("#second").insertBefore("#first");
}
else
{
$("#first").insertBefore("#second");
}
}
</script>
Do you mean to swap html elements according to screen width? If so, why not use CSS?
<style>
.hidden {
display: none;
}
#media screen and (min-width: 768px) {
#first-copy, #second-copy {
display: block;
}
#first, #second {
display: none;
}
}
</style>
<html>
<div id="first" style="border: 1px solid; width: 100px; text-align: center">
<p>
first element
</p>
</div>
<div id="second" style="border: 1px solid; width: 100px; text-align: center">
<p>
second element
</p>
</div>
<div id="second-copy" class="hidden" style="border: 1px solid; width: 100px; text-align: center">
<p>
second element
</p>
</div>
<div id="first-copy" class="hidden" style="border: 1px solid; width: 100px; text-align: center">
<p>
first element
</p>
</div>
</html>
https://jsfiddle.net/8sug5pws/2/
U can use #media screen
for example:
#media screen and (max-width: 480px) {
#info {
font-size: 0.6em;
}
In CSS Of course
try this code its working fine...
resize_solution();
$(document).ready(function(){
$(window).resize(function() {
resize_solution();
});
});
function resize_solution(){
if($(window).width() < 767){
$("#second").insertBefore("#first");
}
else{
$("#first").insertBefore("#second"); }
}
You must use .trigger(resize);
Related
I have here a navbar with a dropdown menu and I wanted the page to stop scrolling when I stretch out the whole screen to another resolution. I have reviewed my code and I think the problem is the conditions in my if-else statement. I am stuck in this for hours now and I cannot formulate a solution to my problem. I also added a label in my html aria-label="hidden" to use for enabling and disabling the whole page scroll. Can someone enlighten me with this problem I am currently having now?
Here is my code snippet:
<div class="c-dropdown-btn"><i class="fas fa-bars c-grey-pill"></i></div>
<div id="c-nav-mobile" aria-label="hidden">
<ul class="c-nav-links2">
<li>カテゴリ1</li>
<li>カテゴリ2</li>
<li>カテゴリ3</li>
<li>カテゴリ4</li>
</ul>
<div class="c-img-cont2">
<div class="c-image-res3"></div>
<div class="c-consult-cont2">
<div class="c-con-rel"><span class="c-consult-text2">自分のキャリアに合った留学を選ぶための無料相談会実施中</span>
<button class="c-btn c-btn-primary consult-text">詳しくはこちら→</button>
</div>
</div>
</div>
</div>
And here is my jquery code for this:
$('.c-dropdown-btn i').click(function () {
$(this).toggleClass('fa-times');
$('#c-nav-mobile').fadeToggle("on");
bodyStyle();
});
$(window).resize(function(){
bodyStyle();
});
function bodyStyle() {
var viewportWidth = $(window).width();
var navMobile = $("#c-nav-mobile");
if(viewportWidth < 768 && navMobile.attr("aria-label") == "hidden") {
$("body").css("overflow", "hidden");
console.log("abc");
} else if (viewportWidth > 769 && navMobile.attr("aria-label") == "hidden"){
$("body").css("overflow", "none");
console.log("123");
}
}
for scss snippet (for #c-nav-mobile)
#c-{
&nav-mobile {
display: none;
position: absolute;
left: 0;
z-index: 1;
top: 41px;
width: 100%;
height: 523px;
padding: 25px 32px 34px 31px;
background: rgba(0,0,0,0.5);
#include mq('md') {
display: none !important;
}
&.on {
display: block;
}
}
}
I declared a function and called it inside resize and also to my click event.
#c-nav-mobile add this:
box-sizing: border-box;
CSS media queries do most of the work for you.
You can eliminate much of the JS here by using css rules inside a class. Then only use JS to toggle the tag - which you are already doing but do so on the body tag.
HTML (just added the body tag for completeness)
<body>
<div class="c-dropdown-btn"><i class="fas fa-bars c-grey-pill"></i></div>
<div id="c-nav-mobile" aria-label="hidden">
<ul class="c-nav-links2">
<li>カテゴリ1</li>
<li>カテゴリ2</li>
<li>カテゴリ3</li>
<li>カテゴリ4</li>
</ul>
<div class="c-img-cont2">
<div class="c-image-res3"></div>
<div class="c-consult-cont2">
<div class="c-con-rel"><span class="c-consult-text2">自分のキャリアに合った留学を選ぶための無料相談会実施中</span>
<button class="c-btn c-btn-primary consult-text">詳しくはこちら→</button>
</div>
</div>
</div>
</div>
</div>
</body>
CSS
// code below works if it's the body that is doing the scrolling
// if not, use the scrolling element instead here and the JS click
#media only screen and (max-width: 768px) {
body.fa-times {
overflow: hidden;
// might need to set a height
height: 100vh;
}
}
JS
$('.c-dropdown-btn i').click(function () {
$('body').toggleClass('fa-times');
$('#c-nav-mobile').fadeToggle("on");
});
What I want:
When on PC/MAC:
All content shall be shown.
When on Smartphone or Tablet: the content should be hidden.
I know I have to look at screen size, but how do I do that?
See my code:
$(document).ready(function() {
$("#button-opl").on('click',function(){
$("#views-exposed-form-attraktioner-block").slideToggle();
});
});
button{
background-color:grey;
border:none;
padding:15px 25px;
cursor:pointer;
width:100%;
color:white;
font-size:18px;
}
#views-exposed-form-attraktioner-block{
display:none;
background-color:orange;
width:100%;
color:white;
text-align:center;
padding:15px 25px;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button-opl">
Click here!
</button>
<div id="views-exposed-form-attraktioner-block">
Hello World
</div>
Javascript way
If you want to do it with Javascript, you'll have to check your window size and act upon that.
I chose the breakpoint to be 480px wide, here.
I also added a $(window).on('resize') to update your page when the window is resized :
var vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if (vw <= 480) {
$('div').hide();
}
$(window).on('resize', function() {
vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if (vw <= 480) {
$('div').hide();
}else{
$('div').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm not visible on mobile !</div>
CSS way
You can do it really easily without any Javascript using CSS Mediaqueries :
#media screen and (max-width: 480px){
div{
display: none;
}
}
<div>I'm not visible on mobile !</div>
I have 2 containers placed side by side (floating). Both of these containers have multiples forms generated dinamically and I can’t know which one will be the highest.
So I use a simple script to calculate both divsheight and apply the highest to both. Easy enough and working fine:
$(document).ready(function () {
var height = Math.max($(".left").outerHeight(),$(".right").outerHeight());
$(".left").height(height);
$(".right").height(height);
});
The forms inside are responsive, so it will be displayed in 3, 2 or 1 column depending on window width. Simple and easy css:
.form {
float:left;
width:50%;
padding-right:20px;
}
#media (max-width: 800px) {
.form {
width:100%;
}
}
My problema is that I can’t seem to make the script work BOTH at resize and at ready function when the page is loaded and run the script anytime the user resize the window manually.
So far I have tried the solutions I have found here around but none Works so far and I have no idea why. I have tried:
$(document).ready(function() {
$(window).resize(function() {
var height = Math.max($(".left").outerHeight(), $(".right").outerHeight());
$(".left").height(height);
$(".right").height(height);
}).resize();
});
and
$(document).ready(myfunction);
$(window).on('resize',myfunction);
function myfunction() {
var height = Math.max($(".left").outerHeight(),$(".right").outerHeight());
$(".left").height(height);
$(".right").height(height);
}
and
var callback = function () {
var height = Math.max($(".left").outerHeight(),$(".right").outerHeight());
$(".left").height(height);
$(".right").height(height);
};
$(document).ready(callback);
$(window).resize(callback);
But while still working when reloading the window, resizing when the containers grow (under 800px) doesn’t run the script (or the height value doesn’t change).
I’m not an expert at javascript / jquery so probably I’m missing something basic but after many hours I can’t find any solution.
Here is a JSFIDDLE with an example with the original script. Any Little help would be greetly apreciated.
The way you are handling the resize is correct, the issue is that you have already set the height of both of the divs previously, therefore they are no longer expanding/contracting to the size of their contents. I.E if the height of the divs was set to 286 on load the Math.max calculation will be using 286 when the window is resized.
To fix, reset the height before you calculate which is bigger:
$(window).resize(function() {
$(".left, .right").height('auto');
var height = Math.max($(".left").outerHeight(), $(".right").outerHeight());
$(".left, .right").height(height);
}).resize();
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.left {
float: left;
width: 50%;
padding-right: 20px;
background-color: grey;
border: 1px solid;
}
.right {
float: left;
width: 50%;
background-color: grey;
}
.form {
float: left;
width: 50%;
padding-right: 20px;
}
input {
width: 100%;
}
#media (max-width: 800px) {
.form {
float: left;
width: 100%;
padding-right: 20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="left">
<div class="form">
<p>form</p>
<input type="text">
</div>
<div class="form">
<p>form</p>
<input type="text">
</div>
<div class="form">
<p>form</p>
<input type="text">
</div>
<div class="form">
<p>form</p>
<input type="text">
</div>
</div>
<div class="right">
<div class="form">
<p>form</p>
<input type="text">
</div>
<div class="form">
<p>form</p>
<input type="text">
</div>
</div>
Hi I am trying to get my website to be responsive. I have two different divs one on the left and one on the right on my website like so...
http://jsfiddle.net/1fupx7aa/2/
HTML
<div class="menu"></div>
<div class="view"></div>
CSS
.menu {
width:100px;
height:100px;
float: left;
background-color: red;
}
.view {
width: 200px;
height:300px;
background-color: yellow;
float:left;
}
On the website, when I click on the red div, content appears on the yellow div.
I am now trying to make my website responsive, so what I would like to do is on a smaller screen, the yellow div I set to display:none; and the red div width:100% like so...
http://jsfiddle.net/3jmbxumb/
HTML
<div class="menu"></div>
<div class="view"></div>
CSS
#media (max-width: 600px) {
.menu {
width:100%;
}
.view {
display: none;
}
}
Now what I need to do is, when I click on the red div, I would like the content in the yellow div to appear where I would create a back button that would lead back to the red div.
Is this possible?
I have been looking at the bootstrap carousel option, but I don't think this works for my website.
What would I call this and is this possible? Might there be a way where if I click on the red div on a mobile device the red div becomes hidden and only the yellow div appears?
You can do this using jQuery and having a specific hidden class for small screens - so you don't have to check for screen width in js.
Javascript:
var showContent = function () {
var $yellow = $('#yellow-view'),
$this = $(this);
//Hide red and show yellow
$yellow.removeClass('hidden-small');
$this.addClass('hidden-small');
//Add content to yellow view
$yellow.html('<strong>my content</strong>');
};
$('#menu').click(showContent);
CSS:
.menu {
width:100px;
height:100px;
float: left;
background-color: red;
}
.view {
width: 200px;
height:300px;
background-color: yellow;
float:left;
}
#media (max-width: 600px) {
.menu {
width:100%;
}
.hidden-small {
display: none;
}
}
https://jsfiddle.net/s9wkbL9m/2/
You might want to use jQuery to do this.
$(document).ready(function(){
$('.menu').click(function(){
$('.view').fadeIn();
});
});
Here is the updated Fiddle.
A quick JS writeup that would work for your scenario
$(function(){
$(".back_btn").hide();
if($(window).width() <= 600){
$(".view").hide();
}
$(".menu").click(function(){
if($(window).width() <= 600){
$(".menu").hide();
$(".view").show().text("Some text");
$(".back_btn").show();
}
else {
$(".view").text("Some text");
}
});
$(".back_btn").click(function(){
$(".view").hide();
$(".menu").show();
});
});
I've set up a simple jQuery UI ProgressBar:
<script type="text/javascript">
$(function() {
$("#progressbar").progressbar({
value: 35
});
});
</script>
<div id="progressbar"> </div>
Among other things, I'd like to display some text in the progress-bar (for starters, I'd just use the "value").
I can't seem to get this to work.
Bonus Question: How do I format the displayed text (e.g. color, alignment)?
Instead of introducing another element (span) and a new style, leverage what is already there like this:
var myPer = 35;
$("#progressbar")
.progressbar({ value: myPer })
.children('.ui-progressbar-value')
.html(myPer.toPrecision(3) + '%')
.css("display", "block");
The css("display", "block") is to handle the case where the value is 0 (jQuery UI sets a display: none on the element when the value is 0).
If you look at the source of The demo, you'll notice that a <div class="ui-progressbar-value"> is added. You can simply override this class in your own CSS, like:
.ui-progressbar-value {
font-size: 13px;
font-weight: normal;
line-height: 18px;
padding-left: 10px;
}
The way I did it was:
<div class="progressbar"><span style="position:absolute; margin-left:10px; margin-top:2px>45% or whatever text you want to put in here</span></div>
You can adjust the margin-top and margin-left so that the text is in the center of the progress bar.
Then you apply the progressbar plugin for the elements which have class progressbar in the javascript section of the page
Hope this help
After fiddling around with some solutions, based on the answers here, I've ended up with this one:
Html:
<div id="progress"><span class="caption">Loading...please wait</span></div>
JS:
$("#progress").children('span.caption').html(percentage + '%');
(To be called inside the function that updates the progressbar value)
CSS:
#progress {
height: 18px;
}
#progress .ui-progressbar {
position: relative;
}
#progress .ui-progressbar-value {
margin-top: -20px;
}
#progress span.caption {
display: block;
position: static;
text-align: center;
}
Advantages:
Caption is centered with no harcoded positioning (necessary if caption width changes dinamically)
No JS strange manipulation
Simple and minimal CSS
This solution allows for a flexible width based on the text as well as centering the text, styling the text, etc. Works in Chrome, FF, IE8, and IE8 in compatibility mode. Didn't test IE6.
Html:
<div class="progress"><span>70%</span></div>
Script:
$(".progress").each(function() {
$(this).progressbar({
value: 70
}).children("span").appendTo(this);
});
CSS:
.progress.ui-progressbar {position:relative;height:2em;}
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:10px;padding-right:10px;}
.progress[aria-valuenow="0"] span {margin-top:0px;}
Working sample: http://jsfiddle.net/hasYK/
I used this:
<div id="progressbar" style="margin: 0px 0px 16px 0px; "><span style="position: absolute;text-align: center;width: 269px;margin: 7px 0 0 0; ">My %</span></div>
<style>
#progress {
height: 18px;
}
#progress .ui-progressbar {
position: relative;
}
#progress .ui-progressbar-value {
margin-top: -20px;
}
#progress span.caption {
display: block;
position: static;
text-align: center;
}
</style>
</head>
<body>
test
<div id="progressbar"></div>
<br>
test2
<div id="progressbar2"></div>
<script>
$("#progressbar").progressbar({
max : 1024,
value : 10
});
$("#progressbar2").progressbar({
value : 50
});
$(document).ready(function() {
$("#progressbar ").children('div.ui-progressbar-value').html('10');
$("#progressbar2 ").children('div.ui-progressbar-value').html('50%');
});
</script>
</body>