I am trying to resize the div based on the current window /iframe size.
For example
if the size is 1200
i want to resize/adjust the size of the div
if the window is smaller then 800
I want to disable right part of the bar if the winnow/iframe is too small.
How can i do it using js or javascript
It can have 1 to 4 iframes columns, and could be in many different screen resolutions.
Thanks
I tried the following media queries code below, but when you have 2 iframe with 500 x500 each or i can have one iframe and the window size coudl be resized based on monitor /resolution etc.. I noticed that if i fix something .. somethingelse changes.
#media screen and (min-width: 1200px) and (max-width: 1510px) {
#topbar {
background-color: #E5EBF1;
border: 0 solid red;
font-size: 11px;
height: 31px;
padding: 0 0 0 2px;
position: relative;
width: 100%;
z-index: 1111;
}
.objects-b {
/*
float: right;
width: 64%;
border: 0px solid green;
margin: 0;
padding: 7px 0 */
display:none;
}
#topbar .hierarchialgroups-b {
float: left;
width: 240px;
bordeR: 3px solid red;
}
.rest-b {
/*
padding: 0;
margin: 0;
border: 0px solid blue;
width: 616px;
align: right */
display:none;
}
}
#media screen and (min-width: 440px) and (max-width: 880px) {
#topbar {
background-color: #E5EBF1;
border: 0 solid red;
font-size: 11px;
height: 31px;
padding: 0 0 0 2px;
position: relative;
width: 60%;
z-index: 1111;
}
.objects-b {
display:none;
}
#topbar .selectgroups-b {
float: left;
width: 39%;
bordeR: 1px solid yellow;
}
.rest-b {
display:none;
}
}
HTML BIT
<div id="tbar" >
<div class="hierarchialgroups-b"><strong>Showing:</strong><select
id="groupselect">
<option value="0" selected>...loading groups</option>
</select></div>
<div class="objects-b">
<ul class="rest-b">
<li><strong>Size Represents</strong>: # Objects</li>
<li><strong>Color Represents</strong>: Group Impacts</li>
<li><span class="color1"> </span>Normal</li>
<li><span class="color2"> </span>Degraded</li>
<li><span class="color3"> </span>Critical</li>
</ul>
</div>
Use .resize() function
$(window).resize(function() {
var height=$(window).height();
var width=$(window).width();
$('#div').css({"width":width,"height":height});
});
Here is the code
Use jquery to reference the div using $('#id') where id is the id of the div, you should be able to check the window dimensions using window.innerWidth / window.innerHeight. Based on the width / height you should be able to modify the div by adding css attributes to alter the div's dimensions
window.onresize = function() { // this will fire every time the browser is resized..
var bWidth = window.innerWidth; // get the viewport width.
var el = document.getElementById("#div"); // get the div you want to work with
if(bWidth <= 800) {
// viewport is less than or equal to 800
} else if(bWidth >= 1200) {
// viewport is greater than or equal to 1200
}
}
then to ensure it is fired on first go...
window.onload = function() {
this.onresize();
};
Related
I want to style the bar before the thumb with a different color on a range input. I'v tried looking for a solution but I havent found a proper solution. This is what I need it to look like:
Chrome doesnt seem to support input[type='range']::-webkit-slider-thumb:before anymore and I am at a loss how to style it. Here's what I have so far:
input[type='range'] {
min-width: 100px;
max-width: 200px;
&::-webkit-slider-thumb {
-webkit-appearance: none !important;
background-color: #white;
border: 1px solid #gray-4;
height: 14px;
width: 14px;
&:hover,
&:focus,
&:active {
border-color: #blue;
background-color: #gray-2;
}
}
&::-webkit-slider-runnable-track {
background-color: #gray-2;
border: 1px solid #gray-4;
}
}
document.querySelectorAll(".__range").forEach(function(el) {
el.oninput =function(){
var valPercent = (el.valueAsNumber - parseInt(el.min)) /
(parseInt(el.max) - parseInt(el.min));
var style = 'background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop('+ valPercent+', #29907f), color-stop('+ valPercent+', #f5f6f8));';
el.style = style;
};
el.oninput();
});
.__range{
margin:30px 0 20px 0;
-webkit-appearance: none;
background-color: #f5f6f8;
height: 3px;
width: 100%;
margin: 10px auto;
}
.__range:focus{
outline:none;
}
.__range::-webkit-slider-thumb{
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #29907f;
border-radius: 50%;
cursor: -moz-grab;
cursor: -webkit-grab;
}
<input class="__range" id="rng" name="rng" value="30" type="range" max="100" min="1" value="100" step="1">
The trick in the post referenced by shambalambala is clever, but I don't think it will work in this case if you want to get something that looks exactly like the image you show. The approach there is to put a shadow on the thumb to create the different coloring to the left of the thumb. Since the shadow extends in the vertical, as well as the horizontal, direction, you also have to add overflow:hidden to the range or the track in order to clip the shadow. Unfortunately, this also clips the thumb. So if you want a thumb that extends beyond the track in the vertical dimension, such as in the image you show where the thumb is a circle with a diameter larger than the track width, this won't work.
I'm not sure there's a pure CSS solution to this problem. With JavaScript, one way around this is to make two range elements that overlap exactly. For one range element, you will see only the thumb and for one you will see only the track. You can use the shadow approach on the track element to get the different color before the thumb. You can style the thumb on the thumb range however you want, and since overflow is not set to hidden for this range element, it can extend beyond the width of the track. You can then use JavaScript to yoke the two range elements together, so that when you move the thumb on the thumb-visible element, the value of the track-visible element also changes.
For example (works in webkit browsers--will need some additional styling for other browsers):
<html>
<head>
<style>
.styled_range {
position: relative;
padding: 10px;
}
input[type=range] {
-webkit-appearance: none;
width: 600px;
background: transparent;
position: absolute;
top: 0;
left: 0;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 12px;
}
.track_range {
pointer-events: none;
}
.track_range::-webkit-slider-runnable-track {
background: #D0D0D0;
border-radius: 6px;
overflow: hidden;
}
.track_range::-webkit-slider-thumb {
-webkit-appearance: none;
background: transparent;
height: 1px;
width: 1px;
box-shadow: -600px 0 0 600px #666666;
}
.thumb_range::-webkit-slider-runnable-track {
background: transparent;
cursor: pointer;
}
.thumb_range::-webkit-slider-thumb {
-webkit-appearance: none;
border: 3px solid #ffffff;
border-radius: 20px;
height: 40px;
width: 40px;
background: #1180AD;
cursor: pointer;
margin: -12px 0px 0px 0px;
}
</style>
</head>
<body>
<form>
<div class="styled_range">
<input type="range" class="track_range"/>
<input type="range" class="thumb_range"/>
</div>
<br/>
<div class="styled_range">
<input type="range" class="track_range"/>
<input type="range" class="thumb_range"/>
</div>
</form>
</body>
<script>
window.onload = function() {
var styledRanges = document.getElementsByClassName('styled_range');
for (var i=0; i<styledRanges.length; i++) {
var thumbRange = null, trackRange = null;
for (var j=0; j<styledRanges[i].children.length; j++) {
var child = styledRanges[i].children[j];
if (child.className === 'thumb_range')
var thumbRange = child;
else if (child.className === 'track_range')
var trackRange = child;
}
thumbRange.oninput = function(thumbRange, trackRange) {
return function(e) {
trackRange.value = thumbRange.value;
};
}(thumbRange, trackRange);
}
}
</script>
</html>
I am having difficulty to put the scroll bar in a vertical position instead of horizontal. Also, I want to slide images with up
and down arrow key of the keyboard. Please help me I have an
assignment due. I'll appreciate your help.
For more information please check my code into jsfiddle https://jsfiddle.net/mgj7hb0k/
The code below is from HTML file
<div class="slider-wrap">
<div class="slider" id="slider">
<div class="holder">
<div class="slide" id="slide-0"><span class="temp">74°</span></div>
<div class="slide" id="slide-1"><span class="temp">64°</span></div>
<div class="slide" id="slide-2"><span class="temp">82°</span></div>
</div>
</div>
<nav class="slider-nav">
Slide 0
Slide 1
Slide 2
</nav>
</div>
CSS file. I have added some styles into separate css file.The "slider" (visual container) and the slides need to have explicity the same size. We'll use pixels here but you could make it work with anything.
#import url(https://fonts.googleapis.com/css?family=Josefin+Slab:100);
.slider-wrap {
width: 300px;
height: 500px;
margin: 20px auto;
}
.slider {
overflow-x: scroll;
}
.holder {
width: 300%;
}
.slide {
float: left;
width: 300px;
height: 500px;
position: relative;
background-position: -100px 0;
}
.temp {
position: absolute;
color: white;
font-size: 100px;
bottom: 15px;
left: 15px;
font-family: 'Josefin Slab', serif;
font-weight: 100;
}
#slide-0 {
background-image: url(http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg);
}
#slide-1 {
background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);
}
#slide-2 {
background-image: url(http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg);
}
.slide:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background: linear-gradient(transparent, black);
}
.slider-nav {
text-align: center;
margin: 10px 0 0 0;
}
.slider-nav a {
width: 10px;
height: 10px;
display: inline-block;
background: #ddd;
overflow: hidden;
text-indent: -9999px;
border-radius: 50%;
}
.slider-nav a.active {
background: #999;
}
We're going to use jQuery here because we love life. Our goal is the adjust the background-position of the slides as we scroll. We can set background-position in percentages in CSS, but that alone doesn't do the cool hide/reveal more effect we're looking for. Based the amount scrolled (which we can measure in JavaScript), we'll adjust the background-position. Alone, that would look something like this:
Js file
var slider = {
// Not sure if keeping element collections like this
// together is useful or not.
el: {
slider: $("#slider"),
allSlides: $(".slide"),
sliderNav: $(".slider-nav"),
allNavButtons: $(".slider-nav > a")
},
timing: 800,
slideWidth: 300, // could measure this
// In this simple example, might just move the
// binding here to the init function
init: function() {
this.bindUIEvents();
},
bindUIEvents: function() {
// You can either manually scroll...
this.el.slider.on("scroll", function(event) {
slider.moveSlidePosition(event);
});
// ... or click a thing
this.el.sliderNav.on("click", "a", function(event) {
slider.handleNavClick(event, this);
});
// What would be cool is if it had touch
// events where you could swipe but it
// also kinda snapped into place.
},
moveSlidePosition: function(event) {
// Magic Numbers =(
this.el.allSlides.css({
"background-position": $(event.target).scrollLeft()/6-100+ "px 0"
});
},
handleNavClick: function(event, el) {
event.preventDefault();
var position = $(el).attr("href").split("-").pop();
this.el.slider.animate({
scrollLeft: position * this.slideWidth
}, this.timing);
this.changeActiveNav(el);
},
changeActiveNav: function(el) {
this.el.allNavButtons.removeClass("active");
$(el).addClass("active");
}
};
slider.init();
I'm trying to write a function that watches the window for a few things:
If the window is greater-than 900px and the window is scrolled passed 100 add a BG color to the nav
If the nav is scrolled passed 100 and the window is resized to less-than 900px change the BG color nav.
I've written two functions that should be doing the trick. My problem is my functions work right up until you scroll passed 100 and resize the screen: they won't apply the second class with the second bg color.
Snippet below. Can anyone provide assistance?
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var nav = $('nav');
if( scroll > 100 ) {
nav.addClass('scrolled');
} else {
nav.removeClass('scrolled');
}
});
$(window).resize(function() {
var mq = window.matchMedia('(min-width: 100px) and (max-width: 900px)');
if( mq.matches && $('nav').hasClass('scrolled')) {
$('nav').removeClass('scrolled');
console.log("Working");
$('nav').addClass('scrolledTwo');
} else {
console.log("Not working");
$('nav').removeClass('scrolledTwo');
}
});
});
* {
padding: 0;
margin: 0;
}
nav {
height: 70px;
width: 100%;
border: 1px solid;
transition: all .2s ease;
background-color: transparent;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.nav-fixedWidth {
height: inherit;
width: 1000px;
margin: 0 auto;
border: 1px solid #ccc;
}
main {
width: 100%;
height: 2000px;
border: 1px solid;
background-color: #f1f1f1;
}
.scrolled {
background-color: red;
}
.scrolledTwo {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="nav-fixedWidth"></div>
</nav>
<main></main>
Your code is working fine it is even applying the second class with the second bg color if you will resize slowly your window. The only issue is this if( mq.matches && $('nav').hasClass('scrolled')) condition. As you have mentioned $('nav').hasClass('scrolled') so first time when you will resize it will be true and then
$('nav').removeClass('scrolled');
console.log("Working");
$('nav').addClass('scrolledTwo');
this will apply scrolledTwo class to nav. After that when you will further resize it will never pass this if( mq.matches && $('nav').hasClass('scrolled')) condition, until you don't resize the screen width to less than 100px or greater than 900px and scroll, and will always goto else and you will always see the red color. Try removing it
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var nav = $('nav');
if( scroll > 100 ) {
nav.addClass('scrolled');
} else {
nav.removeClass('scrolled');
}
});
$(window).resize(function() {
var mq = window.matchMedia('(min-width: 100px) and (max-width: 900px)');
if( mq.matches ) {
$('nav').removeClass('scrolled');
console.log("Working");
$('nav').addClass('scrolledTwo');
} else {
console.log("Not working");
$('nav').removeClass('scrolledTwo');
}
});
});
* {
padding: 0;
margin: 0;
}
nav {
height: 70px;
width: 100%;
border: 1px solid;
transition: all .2s ease;
background-color: transparent;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.nav-fixedWidth {
height: inherit;
width: 1000px;
margin: 0 auto;
border: 1px solid #ccc;
}
main {
width: 100%;
height: 2000px;
border: 1px solid;
background-color: #f1f1f1;
}
.scrolled {
background-color: red;
}
.scrolledTwo {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="nav-fixedWidth"></div>
</nav>
<main></main>
Another issue in your code is if I scroll and resize the screen width between 100 to 900 and then again resize it to out of this window then there is no class assigned to your div and that is due to no class added in else of resize function. Changing that to this will do that trick also :)
else {
console.log("Not working");
$('nav').removeClass('scrolledTwo');
var scroll = $(window).scrollTop();
if( scroll > 100 ) {
$('nav').addClass('scrolled');
}
}
my name is Daniel and i'm making a drinking game for school, I want to let a div to become visible when the bar is full (so you know when the bar is full and you win the game), but i have no idea how to do this...
Could you help me out?
HTML:
<div class="col-xs-12" style="display: none;" id="hiddenText">
<div id="bar" class="animated bounceInUp">
</div>
</div>
CCS:
#bar {
background-color: #F8F8F8 ;
width: 340px;
height: 24px;
margin-right: auto;
margin-left: auto;
}
#bar > div {
margin-top: 30px;
max-width: 334px;
width: 100%;
height: 16px;
background: #9d3349;
position: relative;
top: 4px;
left: 3px;
transition: width 500ms;
}
JS:
var jumpsize = 2.77, // %
body = $("body");
(container = $("#bar")), (bar = container.children("div")), (topcnt = function(
px
) {
return 100 * px / container.width();
}), (set = function(pcnt) {
bar.css({ width: pcnt + "%" });
});
body
.on("click", ".card1, .card2, .card3, .card4", function() {
set(topcnt(bar.width()) + jumpsize);
});
set(0);
The reason its not working is because u forgot to put the if statement in the function u run on click. So the if statement only runs once. and on first load it will result in false. To fix your code move the if statement in your Body.onclick.
Next time it would be smart to include the full javascript that is relative to the function.
By looking at the online code i was able to find the issue.
Hope this resolves your issues.
~Yannick
When you hit your target you need to remove the CSS styling of Display = none.
W3 schools page here for some helpful info to help you learn some more.
https://www.w3schools.com/jsref/prop_style_display.asp
The line below inserted when you reach your goal to display should make the bar appear.
document.getElementById("hiddenText").style.display = "block";
I'm not sure you want this, but try this:
var jumpsize = 2.77, // %
width = 0,
body = $("body");
(container = $("#bar")), (bar = container.children("div")), (topcnt = function(
px
) {
return 100 * px / container.width();
}), (set = function(pcnt) {
bar.css({ width: pcnt + "%" });
if(pcnt >= 100) {$('#hiddenText').show();}
});
body
.on("click", ".card1, .card2, .card3, .card4", function() {
width += jumpsize;
set(topcnt(width));
});
set(0);
#bar {
background-color: #F8F8F8 ;
width: 340px;
height: 24px;
margin-right: auto;
margin-left: auto;
}
#bar > div {
margin-top: 30px;
max-width: 334px;
width: 100%;
height: 16px;
background: #9d3349;
position: relative;
top: 4px;
left: 3px;
transition: width 500ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-xs-12" style="display: none;" id="hiddenText">
<div id="bar" class="animated bounceInUp">
<div></div>
</div>
</div>
<button class="card1">click me</button>
You are using jQuery so quicker will be:
$('#hiddenText').show();
Edit:
sooo
if($('#bar').children('div').width() >= 334){
$('#hiddenText').show();
}
As You can see the div with progress bar can have max od 334 px. Check if it has it and if yes then show the text. Put this in that click event
Seems to me like you're overcomplicating things a little bit with the percentage calculations. I would just add a variable for the width of the bar that starts at 0 and increase this with the jumpsize on every click. Once this new variable goes over or equals 100 you show the hidden div.
HTML
<div class="col-xs-12" id="hiddenText">
<div id="bar" class="animated bounceInUp">
<div></div>
</div>
</div>
<button id="button">Click me</button>
<div id="showOnComplete">Show me when the bar is full!</div>
CSS
#bar {
width: 340px;
height: 24px;
padding: 4px 3px;
margin: 30px auto 0;
background-color: #f8f8f8;
}
#bar > div {
position: relative;
float: left;
height: 100%;
width: 0;
max-width: 100%;
background: #9d3349;
transition: width 500ms;
}
#button {
margin: 20px auto;
display: block;
}
#showOnComplete {
width: 400px;
padding: 20px;
margin: 20px auto;
background: blue;
color: #fff;
text-align: center;
display: none;
}
JS
(function($) {
var jumpSize = 20, //increased this for the fiddle, so we don't have to click as often
barWidth = 0,
$bar,
$showOnComplete;
$(function() {
$bar = $("#bar").children("div");
$showOnComplete = $("#showOnComplete");
$(document).on("click", "#button", function() {
barWidth += jumpSize;
$bar.width(barWidth + "%");
if (barWidth >= 100) $showOnComplete.show(); //optionally add a setTimeout of 500 here to account for the final transition of the bar
});
});
})(jQuery);
I've made a fiddle for it here.
New to jQuery and can't quite figure out how to achieve what I'm trying to do. Server can work only with HTML - no PHP or Ruby available (that and I'm not familiar with those languages yet). I'm also using the latest jQuery 1.10.2
What I have is a menu with tiles that each have a preview picture and a title ribbon (the to be specific), what I want is for the titles ribon background to change the opacity when mouse cursor hovers over tile.
So far I have it so that it sort of works, but the problem is that whenever a mouse cursor hovers over a tile, all the titles change the opacity, and not just the one being hovered over. I tried to get index number of a 'li' element using .index and then return it to be used as a identifier, but that didn't quite work. I also tried to do something like this:
<script>
$(function() {
$('menu ul li').on({
mouseenter: function () {
$(this) <some code would come here to do stuff as mouse cursor enters the item area> ;
},
mouseleave: function () {
$(this) <some code would come here to undo stuff as mouse cursor leaves the item area>;
}
});
});
</script>
But I couldn't figure out how to continue off of that to modify the $('.tt1').css
So here's the relevant code fragments of what I have so far...
jQuery code:
<script>
$(function() {
$('menu ul li').on({
mouseenter: function () {
$('.tt1').css('opacity', '1.0');
},
mouseleave: function () {
$('.tt1').css('opacity', '0.6');
}
});
});
</script>
The HTML code:
<menu>
<ul class="collumn-left">
<li><div class="tt1">About</div></li>
<li><div class="tt1">Test</div></li>
</ul>
<ul class="collumn-right">
<li><div class="tt1">Random</div></li>
<li><div class="tt1">More</div></li>
</ul>
</menu>
The CSS code:
/* menu section begin */
menu {
background-color: silver;
box-shadow: 0 5px 10px #6A6A6A;
}
menu li {
margin: 0;
padding: 0;
display: block;
}
.collumn-left,
.collumn-right {
margin: 0;
padding: 0;
float: left;
}
.collumn-left a,
.collumn-right a {
float: left;
border: none;
list-style: none;
color: #000000;
text-decoration: none;
}
.tt1 {
background-color: grey;
opacity: 0.6;
font-weight: bolder;
text-align: center;
}
.tt1:hover {
opacity: 1.0;
}
/* menu section end */
/* Medium display size - Tablet devices & Desktops/Laptops */
#media only screen and (min-width: 1024px) and (max-width: 1280px) {
menu {
min-width: 370px;
width: 1024px;
margin: auto;
padding: 5px;
box-shadow: 0 5px 10px #6A6A6A;
}
.collumn-left,
.collumn-right {
width: 512px;
}
.collumn-left a,
.collumn-right a {
width: 502px;
height: 502px;
margin: 5px;
padding: 0;
}
.tt1 {
margin: 325px 0 102px 0;
font-size: 35px;
line-height: 75px;
}
article {
margin: 0 10% 0 10%;
}
}
/* High Display Resolution Desktops/Laptops */
#media only screen and (min-width: 1281px) {
menu {
min-width: 370px;
width: 1540px;
margin: auto;
padding: 5px;
box-shadow: 0 5px 10px #6A6A6A;
}
.collumn-left,
.collumn-right {
width: 770px;
}
.collumn-left a,
.collumn-right a {
width: 760px;
height: 760px;
margin: 5px;
padding: 0;
}
.tt1 {
margin: 500px 0 160px 0;
font-size: 40px;
line-height: 100px;
}
article {
margin: 0 10% 0 10%;
}
}
Try this javascript code:
<script>
$(function() {
$('menu ul li').on({
mouseenter: function () {
$(this).find(".tt1").css('opacity', '1.0');
},
mouseleave: function () {
$(this).find(".tt1").css('opacity', '0.6');
}
});
});
</script>
edit:
Another, maybe more cleaner way to achieve this would be the following:
CSS
.tt1:hover, .tt1.hover {
opacity: 1.0;
}
Javascript
<script>
$(function() {
$('menu ul li').on({
mouseenter: function () {
$(this).find(".tt1").addClass("hover");
},
mouseleave: function () {
$(this).find(".tt1").removeClass("hover");
}
});
});
</script>
You could easily add other features by just editing your css. For example a nice transition or different styles for smaller screens.
No need for javascript just use css
menu ul li .ttl:hover {
opacity:1.0;
}
$(this).find('.tt1').css('opacity', '1.0');
find() will look for a child element of the hovered element with the class tt1.