I'm honestly stumped with this bug. My website is working perfectly fine on my laptop browser (at least it seems so). But when I switch to my phone it breaks.
(function animateBG() {
$('#logo-fallback').animate({
backgroundPosition: '-=1'
}, 12, animateBG);
})();
#logo-fallback {
background: url(https://i.stack.imgur.com/6B3gO.png);
background-size: auto 130px;
background-repeat: repeat-x;
height: 200px
}
<body data-gr-c-s-loaded="true">
<div id="header">
<div class="container">
<div class="clearfix" id="logo-fallback"></div>
</div>
</div>
<div id="body">
<div class="container">
<div class="row">
<div class="col-md-9 col-centered">
<h4 class="text-muted">Sorry, nothing here.</h4>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</body>
container div, which contains a div with an id of #logo-fallback. #logo-fallback has a background image that repeats on the x-axis, and the x-position of the image decreases by 1 continuously using a jQuery animation to create a 'scrolling' effect.
This seems to work flawlessly on my computer's browser but when I switch to my mobile the image disappears once it has reached the start of the first repeat and reappears a few moments later.
Also, the image seems to move slower on my mobile...
I hope I made some sense out of my situation.
Kindest Regards,
Related
I have tried searching as much as I can through google as well as figuring out the issue myself, but no matter what I try(albeit my knowledge is very limited) I cannot figure out how to scale my image with bootstrap.
Basically I have two flex boxes next to each other, one I want to display the image and the other displays a checklist of items. Each column takes up 6 spots so they are even. The issue is I cannot seem to scale my image down, it is a zoomed in version of my background image that I have added.
This is my code:
<!--about section-->
<section id="about" class="bg-info">
<div class="container-fluid">
<div class="row">
<!--about img col-->
<div class="col-md-6 about-picture height-80"></div>
<!--about text col-->
<div class="col-md-6 about-text height-80 px-5 d-flex align-items-center justify-content-center">
This is what I am using in my css file for the image itself
.about-picture{
background: url(../VScode/images/background.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
Any help with this is greatly appreciated! Thank you!!
background-size: cover; will "resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges".
You might want to choose a different background-size (and background-repeat). See: MDN: background-size
I am trying to add a slider to an existing page that has a left and right side. The left side has a background image, some text and a clear fix that expands the image to the height of the right side.
When I use Slick Slider and make the left side element a slide, the clear fix no longer works and the height is dictated by the content of the left element.
Here are 2 jsfiddles that demonstrate the problem:
Without slider: http://jsfiddle.net/robmccart/15wrct6g/
With slider: http://jsfiddle.net/robmccart/yj9nerh1/
Here's the code with slider:
<div class="parent">
<section class="right-side"></section>
<section class="slider left-side">
<div class="row" style="background-image: url(http://cpaws.org/engaging-networks/images_donation/Donation-pg-Peel-Watershed.jpg);">slide1</div>
<div class="row" style="background-image: url(http://cpaws.org/engaging-networks/images_donation/Donation-pg-Peel-Watershed.jpg);">slide2</div>
<div class="row" style="background-image: url(http://cpaws.org/engaging-networks/images_donation/Donation-pg-Peel-Watershed.jpg);">slide3</div>
</section>
</div>
CSS:
$c1: #3a8999;
$c2: #e84a69;
.parent {
background: #336633;
}
.right-side {
float: right;
height: 700px;
}
.left-side {
padding-right: 450px;
}
I'm not sure if I'm using the clear fix properly, but it looks like the code injected by Slick Slider is breaking something.
Thanks
I'm using CarouFredSel for an image carousel, and I'm having an issue with the transitions between items.
I want to use some simple HTML in the carousel rather than plain old images, but when I do, the swipe transition doesn't work. While the old image slides out, the new image flashes in rather than sliding in and you can see the background briefly in between images.
<div id="carousel">
<div>
<img src="img/instagram1.png">
<div style="position:relative; z-index:100; bottom:20px;">Byline 1</div>
</div>
<div>
<img src="img/instagram2.png">
<div style="position:relative; z-index:100; bottom:20px;">Byline 2</div>
</div>
</div><!-- /carousel -->
As you can see from this JSFiddle, the transition effect works fine with just images, but it looks off when using HTML.
It turns out that all you have to do to fix this is apply a left float on the items like this:
#carousel div {
display: block;
float: left;
}
I am building a phonegap app that needs to scale to all resolutions, and am thus defining everything in terms of percentages. I'm also using a fixed header with a div I defined in Jquery as the contents.
The problem I have is that during the transition between pages, there is a 'stutter' because the page height changes during the transition. I'm trying to stop this from happening. Any thoughts?
I've created a sample below to really illustrate the point.
http://jsfiddle.net/fz7qs/2/
<div id="pageContainer" style="position: relative !important; height: 100%;">
<div data-role="page" id="test1">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<a id="page2link">To Page 2</a>
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="test2" style="height: 568px">
<div data-role="header">
<h1>Page 2</h1>
</div>
<a id="page1link">To Page 1</a>
<div data-role="content" style="height: 50%;">
<p style="height: 80%; border: 1px solid black;">This is page 2</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
The entire jsFiddle page jumps on the very first visit in Chrome desktop browser, so press the jsFiddle RUN Button to load correctly before use.
EDIT: Answer and jsFiddle revised per comment section developments.
EDIT 2: jsFiddles now use jQuery 1.7.2 with jQuery Mobile 1.2.0 to fix Chrome Browser Bug.
jsFiddle DEMO
The solution is to set your styles in a CSS file and not the HTML section since the jQuery Mobile UI has it's own style themes via a style sheet too.
Also, you have an extra closing div for page at the bottom in that HTML as well as not closing the webpage. The head section in your HTML is not necessary for jsFiddles, as the page is setup for HTML5 and you just need to import files (mobile jQuery) into jsFiddle using the Manage Resources button.
Although you listed in your Question as complete percentage units, I've keep the pixels units as shown in your example, but those can be percentages as well.
CSS Settings:
a {
cursor: hand;
cursor: pointer;
}
.content1 {
height: 268px;
}
.text1 {
height: 50%;
border: 1px solid black;
}
.content2 {
height: 568px;
}
.text2 {
height: 80%;
border: 1px solid black;
}
In your HTML section, I've also pinned the footer to the bottom of the page using data-position:
<div data-role="footer" data-position="fixed">
Besides pinning the footer to the bottom of the page, you can also have it not animate by adding an extra setting of data-id for each page that has the same value.
<div data-role="footer" data-id="foo" data-position="fixed">
jsFiddle FOOTER.
EDIT 2: Per recent discovery of jQuery 1.8.2 and jQuery Mobile 1.2.0 bug seen in Chrome (hidden scrollbar still causes body elements to jump), here is a revised jsFiddle example:
jsFiddle Percentage Based with jQuery 1.7.2 and jQuery Mobile 1.2.0
About this bug:
I just discovered that using jsFiddle with jQuery 1.8.2 and jQuery Mobile 1.2.0 does not work as intended when overflow is set to hidden during use of a scrollBars function within that jsFiddle.
That function is to hide the browsers scrollbars during jQuery animations, preventing elements to briefly jump around during the animation period of page changes.
The browsers scrollbars are in fact hidden, but elements in the body section continue to "jump" as if the scrollbars are still present.
This does not happen when jsFiddle jQuery is set to 1.7.2.
If your curious how to have multiple psuedo pages on a single page, check out this jsFiddle for an unrelated SO Answer here.
Try to change this:
<div data-role="content" style="height: 50%;">
to that:
<div data-role="content" style="height: auto;">
example: http://jsfiddle.net/fz7qs/13/
takes deep breath
Ok, I have a large div that acts as a background layer. This div pans from left to right based on the link you select in a typical horizontal navigation. It's a bit of a novelty thing.
The HTML structure:
<div id="scroll">
<div class="container_16">
<div id="header" class="grid_9 suffix_3 alpha omega">
<!-- the links that control animation -->
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</div> <!-- end #header --> <div class="main grid_8 alpha omega">
<div class="content grid_12 alpha">
<div id="the_content">
<!-- content is loaded in here via ajax -->
</div><!-- end the_content -->
</div><!-- end .content -->
<div class="clear"></div>
<div id="footer">
Footer stuff
</div>
</div> <!-- end .main .grid_8 .alpha .omega -->
</div> <!-- end .container_16 -->
</div> <!-- end scroll -->
A brief snippet of CSS:
#background_container {
position: absolute;
left: 0px;
top: 0px;
z-index: -1000;
width: 100%;
height: 100%;
}
#scroll {
width: 100%;
height: 100%;
overflow: auto;
}
The Javascript simply uses jQuery to animate the "left" attribute. I would include it, but there's a lot going on and I don't think it will help bring a solution.
Basically, when the background div scrolls from the first position to the last position, the content seems to "scrunch" briefly in Safari.
Video of this behavior:
[redacted]
In the video, I demo both safari and firefox. As you can see, in Safari the content scrunches/glitches during the animation. In Firefox, it does not. Safari is seemingly the only browser that does this. It even works in IE6. :)
The div that appears to "scrunch" seems to be <div id="header" class="grid_9 suffix_3 alpha omega"> but, sometimes you can see a scroll bar briefly which suggests <div id="scroll"> may be the root cause.
Is this a Safari rendering issue that's common and can be avoided? Or should I just suck it up?
Thanks in advance!
You have to set -webkit-transform: transform on the original element so that it gets hardware accelerated on load.