How to make background move slower than text in Skrollr? - javascript

tIt seems that I did as it is in example here but my background moving faster than text. What did I do wrong?
My HTML:
<div id="loader-bg" data-0="background-position:0px 0px;" data-100000="background-position:0px -50000px;"></div>
<div id="skrollr-body">
Content text...
</div>

The demo uses background-attachment:fixed to get full control of the movement.

Maybe you forgot to set the class attribute on your loader-bg div
class="skrollable skrollable-between"

Related

how to make an element padded to set the other element's, besides it, text visible completley on overflow in html

I have used float and made 3 divs floated, left, right and center. Left one and right one have images, Where as center one has text in it. But, when the center div's text is overflowed, it's text is displayed below. For example, I have programmed my html file based on my laptop browser. I have used padding so that the text will be fit exactly in between those 2 images. But when I have opened the same html file in my mobile, which has less pixels, the text has been displayed in 2 lines.
Now, my problem is that, I want to make the text fixed in between those 2 images no matter in which device or browser the file is opened. How can I do that?
Here is my code:
<header>
<div style="float:left;padding-left:24%">
<img src="avr_logo.jpg" style="display: inline" width="100" height="18%" alt="Browser not Supported">
</div>
<div style="float:right;padding-right:20%"><img src="hk.jpg" width="100" height="17%"></div>
<div style="float:center;padding-top:1%">
<h1>Welcome to AHK Organization</h1>
</div>
</header>
I do not have any fixed tags as of in:
How can I make an element on a webpage fixed BUT relative to another element?
The solution over there says to fix the center and make left and right tags relative to the center tag. I don't want to fix any tag.
try this fiddle use display:inline-block rather than float
<header>
<div style="display:inline-block;width:25%;">
<img src="avr_logo.jpg" style="display: inline" width="100%" alt="Browser not Supported">
</div>
<div style="display:inline-block;width:44%;">
<h1>Welcome to AHK Organization</h1>
</div>
<div style="display:inline-block;width:25%;"><img src="hk.jpg" width="100%" alt="Browser not Supported"></div>
</header>

Get the background-image url from an lower div to add them to an higher div

Im trying to put a background-image url of an lower div and add them to an higher div. The problem is, there are many lower divs with background-images and all of them has the same classname. Overall Im trying to build a parallax theme with drupal 7. The vision is to stream all of my news, put the background-image on 100vh, put the content in the middle in a white box and let them parallax scroll. I am working with views. I have one view which displays all news with fields: Title, Image, Body. The image-field is an background-image field, so the div where its normal displayed got the original-image url as background-image-url.
I just can't put the url of .bg-holder into .section.jumbotron. Or is there any other solution?
<div class="section jumbotron">
<div class="views-field views-field-title">
<h1 class="field-content">HEADLINE</h1>
</div>
<div class="views-field views-field-field-image">
<div class="field-content">
<div class="bg-holder" style="background-image: url(http://localhost/drupal/sites/default/files/styles/large/public/field/image/wallhaven-157066.jpg?itok=2BHBQSVa); background-attachment: scroll; background-size: 1903px;"></div>
</div>
</div>
<div class="views-field views-field-body">
<p class="field-content">LOREM</p>
</div>
</div>
Jfiddle of my Body:
http://jsfiddle.net/anLL1uop/2/
I'm not sure I 100% understand your question, but to change the background of 'jumborton', to that of a specific bg-holder, I would give each one a unique ID, so they can all have the same style (since they are the same class), but the ID lets you tell jQuery which background image you want. I would also set the background-image for each one in the css file, as opposed to doing
<div style="background-image: url(...);"
Here is a jsfiddle that shows you what I mean. It has the jQuery needed to change the background of the jumbotron to that of the clicked div, using its id.
https://jsfiddle.net/mahmudzero/anLL1uop/23/

How to ensure the slider text stays under the image

I have the following page: http://jsfiddle.net/ybv4jd9d/
HTML:
<div class="box hidOverflow marginCenter">
<div class="caption setLeft">
<h3>This is Image One</h3>
<p>This is a description or a start to the image one article...</p>
</div>
<img src="http://pagesbyz.com/n4n/theImages/banner.jpg" />
</div>
If the output pane is made smaller in the jsfiddle link, the text shows up and doesn't stay hidden.
How can I use z-index to make it go under the image so it doesn't show up and stays hidden.
JSFiddle: http://jsfiddle.net/0vwm1vq0/
.box { overflow:hidden; } Will make the text invisible if it falls outside your image.
If you want the text to always be readable [within the grey area] you will need to use media queries to decrease the font size dynamically.
When I'm adding an overflow to the box-div, the text hides itself when making the page smaller.
So following is the solution to your problem:
.box {overflow:hidden;}

Hover option, or javascript

I'm making a practice website and I'm trying to add a hover effect to an image, the image being arrows to click back or forward. I assume something is wrong with the code, within its structure, or perhaps I would need to use javascript to achieve a rollover effect.
I made a fiddle to show the current work: http://jsfiddle.net/Z7VTy/1/
...I'm new to everything.
<body>
<div id="slider_wrapper">
<div id="slider_container">
<div class="controllers" id="previous"></div>
<div id="slider">
<img src="Images/slide_two.png" width="960" height="425" />
<img src="Images/slide_one.png" width="960" height="425" />
<img src="Images/slide_three.png" width="960" height="425" />
</div>
<div class="controllers" id="next"></div>
</div>
</div>
</body
not sure I understand your issue
demo
#previous:hover {
background-image: url(left_on.png);
}
would change the image
You can change slider_wrapper container from div to a tag and use hover state for the slider_wrapper. change display mode for #previous and #next to none, and add following style
#slider_wrapper:hover #previous, #slider_wrapper:hover #next{
display:block;
}
see an example here http://jsfiddle.net/Z7VTy/3/

JQuery: How to switch image back and forth?

I have the following HTML:
<div class="listing ref_1">
...
<div><img src="toggleON.png" /></div>
...
</div>
<div class="listing ref_2">
...
<div><img src="toggleON.png" /></div>
...
</div>
<div class="listing ref_3">
...
<div><img src="toggleON.png" /></div>
...
</div>
What I want to do is programmatically change the toggleON.png image to toggleOFF.png.
I'm trying to use the following code to do so but it's not working:
$('.ref_2').src("toggleOFF.png");
Anyone know what I'm doing wrong because the code above doesn't work.
Also, is there a better way to handle this?
'.ref_2' points to the div, you'll have to get to the image within the div
$('.ref_2 img').attr("src","toggleOFF.png");
would probably do it for you.
You need to select the img tag in side .ref_2
$('.ref_2 img').attr("src","toggleOFF.png");
It might be better though to put the image definition in css and swap classes.
<style>
.toggleOn div{
background: url('toggleOn.png') no-repeat;
}
.toggleOff div{
background: url('toggleOff.png') no-repeat;
}
</script>
<div class="listing ref_1 toggleOn">
...
<div></div>
...
</div>
<div class="listing ref_2 toggleOn">
...
<div></div>
...
</div>
<div class="listing ref_3 toggleOn">
...
<div></div>
...
</div>
<script>
$('.ref_2').removeClass('toggleOn').addClass('toggleOff');
</script>
This makes it really easy to change the image and lets you use the class as a state toggle if you need to check on it later.
Also it looks like you are using ref_# as a unique identifier, if so then it would be better to make it the ID of the div, will speed up jQuery's ability to find the element.
What I like to do is put both images in my main document in a hidden div, like:
<div style="position: absolute; visibility: hidden">
<img id="toggleON" src="/whatever/toggleON.png" .../>
<img id="toggleOFF" src="/whatever/toggleOff.png" .../>
</div>
That way they're both in the browser's cache. Then, to toggle an image from one to the other, you can do something like:
$(".whatever img").replaceWith($("#toggleON").clone());
Another solution is to put both image on absolute position, with the default one is set to the front (Using z-index property).
On mouse hover, you can hide the one in the front and the toggled-off image will showed up. The advantage of using this method is you could actually use animation technique to make it even smoother. It's what I did here. (It would be better if you have an additional wrapper div and set the mouse hover event on it)

Categories

Resources