On a webpage, I have 5 image links, laid out like the 5 side of a dice. The 4 corners all come together in the middle, and the center image lays on top (it's going to be a "home" button).
I already managed to get the 4 corner images to stay together while remaining centered and scaling down with the window (as seen HERE), but the problem I'm having now is getting my top layer image to do the same thing.
<script>
$(window).resize(function () {
if ($(window).width()<=1346) {
$('.rowdiv').find('img').css({ 'width': '100%' });
}
else {
$('.rowdiv').find('img').css({ 'width': '673px' });
}
});
$(window).resize(function () {
if ($(window).width()<=1346) {
$('.rowdiv2').find('img').css({ 'width': '100%' });
}
else {
$('.rowdiv2').find('img').css({ 'width': '220px' });
}
});
</script>
Is the fact that I have 2 different resize functions negating my second one?
You can use CSS media queries to achieve this quite easily. For example:
.rowdiv img { width: 673px; }
.rowdiv2 img { width: 220px; }
#media (max-width: 1346px) {
.rowdiv img,
.rowdiv2 img { width: 100%; }
}
Please see this jsFiddle demo, or the full screen result.
Related
so, I'm trying to make two adjacent divs, such that on mouseover the div on the right is moving left and the div in left is resizing (getting tighter). The div on the left contains text that when div is getting tighter the words in the must go to next line to fit new size, and that's exactly what I want. but the problem is that when words go to next line they just disappear from line and appear in the next. I want them to move to the next line instead of disappearing and appearing, like this:
here is the code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".SideMenu").mouseout(function() {
$(".mainTitleDiv").animate({
width: '900px',
}, {
queue: false,
})
$(".SideMenu").animate({
right: '-500px',
}, {
queue: false,
})
});
});
$(document).ready(function() {
$(".SideMenu").mouseover(function() {
$(".mainTitleDiv").animate({
width: '400px',
}, {
queue: false,
})
$(".SideMenu").animate({
right: '0px',
}, {
queue: false,
})
});
});
</script>
Here are options to achieve Fitting Text to a container
USING CSS vw
<h1>Fit Me</h1>
CSS
#import url('https://fonts.googleapis.com/css?family=Bowlby+One+SC');
h1 {
text-align: center;
font-family: 'Bowlby One SC', cursive;
font-size: 25.5vw;
}
USING jQUERY Library such FitText
Here is a sample after including the library in your HTML file
jQuery("h1").fitText(0.38);
Here are link to other library
textFit
I am having css issues when using jQuery's animate. I have tried a few methods to get this working but to no avail. Basically all I'm trying to do is have a side bar slide left and right via a click event but it seems the css (float) is causing issues. I know exactly the problem but not sure how to exactly fix it. Rather than me trying to explain the problem i have reproduced it with jsfiddle: http://jsfiddle.net/70hq1ky2/
The main content(article) seems to dip for milliseconds because it has the float style.
<a href='#' class='slide-side'>Slide</a>
<div style='clear:both;'></div>
<aside data-side-bar="open"></aside>
<article></article>
$('.slide-side').click(function (e)
{
var asideWidth = $("aside").width();
var isOpen = $('aside').attr("data-side-bar");
if (isOpen == "open") {
$('aside').animate({ marginLeft: '-=' + asideWidth });
$('article').animate({ width: '100%',});
$('aside').attr("data-side-bar", "close");
}
else if (isOpen == "close")
{
$('aside').animate({ width: '20%', marginLeft: '0' });
$('article').animate({ width: '80%' });
$('aside').attr("data-side-bar", "open");
}
});
Any help greatly appreciated! On pointers on writing this better is certainly most welcome.
Regards,
Instead of having your object have CSS of float: left or right or whatever, using absolute positioning. For example:
HTML
<div id="sidebar">
Woo sidebar content.
</div>
CSS
#sidebar{
position: absolute;
width: 100px;
left: 0px;
top: 100px; /* top offset */
}
Javascript/jQuery
hideSidebar = function(){
$("#sidebar").animate(
{
left: "-100px"
},
500
}
}
Therefore all I need to do is set the left attribute in jQuery to the negative width of the div, and it disappears, then setting it back to 0 will make it appear again. This is, of course, assuming you want the sidebar on the left side, otherwise use right instead of left.
Also note that if you want the sidebar to follow the user as they navigate through your application, you can also set position: fixed instead, so it follows the user as they scroll.
Make slight change in your script make +5 for aside
$('.slide-side').click(function (e)
{
e.preventDefault();
var asideWidth = $("aside").width();
var isOpen = $('aside').attr("data-side-bar");
if (isOpen == "open") {
$('aside').animate({ marginLeft: '-=' + asideWidth+5});
$('article').animate({ width: '100%',});
$('aside').attr("data-side-bar", "close");
}
else if (isOpen == "close")
{
$('aside').animate({ width: '20%', marginLeft: '0' });
$('article').animate({ width: '80%' });
$('aside').attr("data-side-bar", "open");
}
});
I have a slide script where you can set the ammount of visible images and need to change the ammount when I reach a browser size.
When browser width is smaller than 768px show 4 items.
Is this possible to combine below 2 scripts?
FIDDLE
Slider script:
$('.logo-slide').wmuSlider({
touch: Modernizr.touch,
animation: 'slide',
items: 5
});
Browser width script:
$(window).resize(function() {
if ($(window).width() < 767) {
$(".nav-wide").hide();
}
else {
$(".nav-wide").show();
}
});
I try to combine these like below script, but it doesn't work
$(window).resize(function() {
if ($(window).width() < 768) {
$('.logo-slide').wmuSlider({
items: 4
});
}
else {
$('.logo-slide').wmuSlider({
items: 5
});
}
});
Your window.width and resize methods are spot on for detecting the different screen sizes.
The jquery plugin is probably developed to be called only once on page load.
A plugin like this might be a better option where you can have minimum and maximum item numbers?
http://www.woothemes.com/flexslider/ (see // Carousel Options minItems and maxItems)
Try CSS3
#media screen and (max-width: 767px) {
.logo-slide { display: none; }
}
I need that when I scroll down or up with mouse wheel or sidebar my div change incrementally the Y position (for example 50px up or down ). I need this in Javascript/Jquery.
I Try this code, but only works for scrolling down(The Scrolling Down and Up Function is working well, only the animate part is working wrong):
UPDATE:
var sidebarScrollTop = 0;
$(document).ready(function() {
sidebarScrollTop = $("body").offset();
$(window).scroll(function ()
{
var docScrollTop = $('body,html').scrollTop();
if(docScrollTop > sidebarScrollTop.top)
{
$("#legend").stop().animate({ marginTop: "+=50px",}, 'slow', "easeOutCirc" );
}
else
{
$("#legend").stop().animate({ marginTop: "-=50px",}, 'slow', "easeOutCirc" );
}
});
});
$(window).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
$(document).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
Thanks
You can use
$(window).scroll(function() {
// Your scroll code here
});
to grab whenever the user is scrolling on the page.
Next you want to change the div's y-value.
If the div is positioned absolute, this is just changing its top-value.
$('my-div').top = original-top-value + $(window).pageYOffset;
I believe you need is to keep the div always showing even when user scrolls down. If that is the case then it can be done with only CSS:
div {
position: fixed;
z-index: 100;
top: 100px;
left: 100px;
}
The values of z-index, top and left are dummy values. Change em with your ones.
UPDATE:
Since CSS Solution won't work for you, here is a working example writter in JS: http://jsfiddle.net/qCtt5/
Can a zoom image like effect be reproduced with jQuery + background-position animation?
something like this: http://www.sohtanaka.com/web-design/examples/image-zoom/
I mean, instead of animating image size (which sucks because browsers resize images horribly) - do a animation by setting a background image on a link, and animate the position and size of the link.
edit:
A idea is to use two images. For example:
two overlapped images, one 200 x 200 pixels, the other 400 x 400 pixels
only the 1st image is visible, the 2nd image is hidden behind the 1st, and resized to 200 x 200
the user hovers over it, then the first image enlarges to 400 x 400 and fades out simultaneously
the second image fades in and enlarged simultaneously to its original size (400 x 400)
Could this be achieved with jquery and how?
CSS
#div{
background: url('http://images.epilogue.net/users/sirgerg/phoenix_nebula.jpg') top no-repeat;
background-size: 10%;
height: 490px;
width: 490px;
}
JS
$('#div').hover(function (){
$(this).animate({
'background-size': '50%'
})
}, function (){
$(this).animate({
'background-size': '10%'
})
})
HTML
<div id="div"></div>
On JSFIDDLE
DESCRIPTION: works only on latest chrome
REFERENCE: Set size on background image with CSS?
You mean like this
$('div').hover(function() {
$(this).animate({
width: 400,
height: 400
})
}, function() {
$(this).animate({
width: 200,
height: 200
})
})
Check working example at http://jsfiddle.net/vm4wQ/