I am working on an image gallery inside a web template, similar to this link. now currently when i click on an image it will be shown inside a jquery slider. but i need the image inside the slider to show the span defined inside the markup <span><strong>Project name:</strong><em>villa2</em></span>, where each image will have the following markup :-
<li>
<figure><img src="http://livedemo00.template-help.com/wt_47767/img/page3_img1.jpg" alt=""><span><strong>Project name:</strong><em>villa2</em></span></figure>
</li>
so i define the following inside my css file:-
#gallerySlider .placeholder:after {
content: "test";
color: yellow;
font-size: 36px;
font-family: arial;
position: relative;
display: block;
height: 20px;
width: 200px;
z-Index: 1;
bottom: 42px;
text-align: right;
margin: -8px;
}
which will show the following :-
where i was able to add the text "test " inside the slider. but can anyone adivce how i can do these 2 modifications:-
1) instead of showing a static text inside the slider using the following css:-
#gallerySlider .placeholder:after {
content: "test";
how i can force the CSS content , to show the <span><strong>Project name:</strong><em>villa2</em></span> which is related to the rendered image ?
2) how i can move the content to be below the image instead of being on the left ?
Thanks
EDIT
now after many tests and modifications i did the following modification to the loadImage callback function inside the Touchtouch script :-
function loadImage(src, callback){
var img = $('<img>').on('load', function(){
callback.call(img);
});
img.attr('src', src);
// get all the captions (should probably be done with variable referring to something about above selector)
var allcaptions = $("figure span");
// setTimeout is a hack here, since the ".placeholders" don't exist yet
//setTimeout(function () {
$(".placeholder").each(function (i) {
// in each .placeholder, copy its caption's mark-up into it (remove the img first)
var caption = allcaptions.eq(i).clone();
// caption.find("img").remove();
$(this).append("<div class='caption'>" + caption.html() + "</div>");
});
// }, 500
//);
}
this seems to show the span as follow:-
but i am facing two problems:-
First Problem as shown on the above picture the text will be shown twice , specifically when i click on the next and previous arrows, here is the built-in code for the next & prevoise arrows :-
function showNext(){
// If this is not the last image
if(index+1 < items.length){
index++;
offsetSlider(index);
preload(index+1);
}
else{
// Trigger the spring animation
slider.addClass('rightSpring');
setTimeout(function(){
slider.removeClass('rightSpring');
},500);
}
}
function showPrevious(){
// If this is not the first image
if(index>0){
index--;
offsetSlider(index);
preload(index-1);
}
else{
// Trigger the spring animation
slider.addClass('leftSpring');
setTimeout(function(){
slider.removeClass('leftSpring');
},500);
}
}
Second problem. is that as i click on next & previous arrows the image will keep loosing its position and after many next & previous i will end up having the image on the following position at the bottom of the page:-
so can anyone adivce how i can fix these 2 issues ?
Pseudoelements :after and :before make possible to add an element into the html flow with just css... but that's it. An element which can be text, shapes, images (using css instructions as content:url('image.png'), etc. But you can't add html in the content:of the pseudoelement (as logn as I know).
You could use simple jquery as:
$(".placeholder").after("<span class="your-class-to-style"><strong>Project name:</strong><em>villa2</em></span>");
But if you have control of the html I would just include the span there.
(note: :after and:before follow the html flow so to reposition them you need to use position:absolute not forgetting to add relative to the parent)
Well, if you check the sources, you will see they are using the TouchTouch jQuery plugin (a little bit outdated by the way). Since the plugin doesn't have options or callbacks, you will have to do this manually. The key is in the following line:
loadImage(items.eq(index).attr('href'), function(){
placeholders.eq(index).html(this);
});
So, even if you add the texts with jQuery, the plugin will remove it from the placeholder and add only the image.
Related
I'm a jquery newbie trying to make my logo remain hidden and only appear when I scroll down.
The problem with the following jquery code is that it makes my logo appear when I load the site
The code only works as intended when I scroll once, however I want to make the jquery load the page with the image hidden. How can I fix the following code to accomplish this?
<script>
(function($) {
var $logo = $('.logo');
$(window).on('scroll', function() {
$logo.css({display: $(window).scrollTop() > 300 ? "block":"none"});
});
})(jQuery)</script>
You should load the css with that element hidden or withuot displaying it.
You can either do it directly from css (I recommend that) as:
.logo{
display: none;
// or
visibility: hidden;
}
Or, do it with jQuery as:
Above the var $logo = $('.logo'); add $('.logo').css('display','none');.
Then to make it visible again, $('.logo').css('display','block');.
Hope that helps!
I'm hoping to overlay text from a variable at the bottom of every image using jquery preferably, or javascript.
Here's the project I'm working on - http://codepen.io/chrismcintosh/pen/ejzut.
This is the first javascript I've ever produced so don't be too hard on me.
Can anyone point me in the right direction?
The question is a little light on the details but hopefully this helps. First, you need to add an element that will hold the data to your HTML. You can do this via JS instead of via HTML if you want, but here goes:
<img src="http://greatworkperks.com/sites/default/files/perks/RunorDye2.jpg"
class="tile" id="Run Or Dye" data-toggle="modal" data-target="#myModal"
onclick="myFunction(this.id)">
<!-- Below is the new div -->
<div id="RunOrDye_Overlay" class="overlay">Run or Dye</div>
Next, add the corresponding CSS style. Here is one that might work:
DIV.overlay{
position: relative;
display: inline;
top: 110px;
left: -290px;
background-color: #333333;
color: white;
}
At this point your overlay exists. I'm not sure if you need your JS to actually do anything at this point -- you could set up your JS to toggle this div when the user hovers over the image or something like that.
Does this help?
Instead of hard-coding the overlays into your html, you can use jQuery's .wrap() function to wrap each tile, and then append a text element to each wrapper.
// wrap each tile in a span
$('.tile').wrap('<span class="tile-wrapper"></span>')
// append the text to each wrapper
$('.tile-wrapper').each(function(){
var $this = $(this);
$this.append('<div class="image-text">' + $this.find('img').attr('id') + '</div>');
});
If you make each wrapper element position: relative and each text overlay position: absolute the overlays will automatically be positioned in the middle of each tile. Then you can adjust the overlay's bottom property to put them at the bottom of the tile.
Here's the updated CodePen
I want to have the background image of a page change every 5 seconds. There are 5 images and I want them to loop.
I researched thoroughly here and tried different approaches. Can someone please tell me what is wrong with this code:
In my css I have:
html, body, #wrapper {
height:100%;
margin: 0;
padding: 0;
border: none;
background-image:url('images/indexbg01.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center center;
}
and my javascript I have:
var imageArray = ['images/indexbg02.jpg', 'images/indexbg03.jpg',
'images/indexbg04.jpg', 'images/indexbg05.jpg',
'images/indexbg01.jpg'];
var imageIndex = 0;
function changeBgImage(){
var imageUrl = "url('" + imageArray[imageIndex] + "')";
$('body').css('background-image', imageUrl);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
setInterval(changeBgImage, 5000);
I first had the imageUrl variable built in the line that follows, but I added this so I could check it was built ok.
In the chrome debugger, when I put a breakpoint on the line following the imageUrl build line, it stops nicely every 5 seconds, the imageUrl is built as it should, yet the background does not change.
I edited the fiddle: http://jsfiddle.net/5Cv49/1/.
Enter and see. The only markup there is the:
<div id="wrapper"></div>
The only css modified is:
adding #wrapper to the selector.
See how background is overlapped by #wrapper's background.
Works in the fiddle.It means you need to run script after page load like the fiddle does:
$(window).load(function(){
//your script
});
Working fiddle
One approach that I personally have done in the past is to have a full page slideshow using jQuery. there are a number of versions of slideshow you can use from the internet. There are 100s of them some better than others. In the slideshow have it times to change every 5 seconds like you wanted. in your html wrap the slideshow in a div (#slideshow_background for example). wrap the rest of your html page into another wrapper (#content). in your CSS set the following..
#slideshow_background {
margin:0;
padding: 0;
position : initial;
width: 100%;
height:100%;
}
the put the css for your #content and set the z-index to 1 so that it lies above the slideshow.hope this helps
I'm trying to get a links background image to toggle or swap on click for an FAQ accordion expand/contractable div using javascript.
I've gotten things working based on this jsfiddle example (http://jsfiddle.net/QwELf/)
You can see my page working here (http://bit.ly/1hfgcGL)
The problem comes in when you click one of the toggle links a 3rd time. It gets the wrong background image and is then out of sync with how it should look.
Right arrow > for contracted state and downward arrow for expanded state are how they should be but the opposite shows up.
It seems to work just fine in the jsfiddle on the 3rd or more clicks any idea what's going wrong with mine?
Script
<script type="text/javascript">
function changeArrow(element){
var arrow = element;
if(arrow.className == 'background_one'){
arrow.className = 'background_two';
} else {
arrow.className = 'background_one';
}
}
</script>
CSS
.background_one { text-decoration: none; padding-left: 26px; background: url(http://skmgroupwork.com/suntrust/landingpages/307m/chevright.gif) center left no-repeat;}
.background_two { text-decoration: none; padding-left: 26px; background: url(http://skmgroupwork.com/suntrust/landingpages/307m/chevdown.gif) center left no-repeat;}
HTML
<a class="background_one" data-toggle="collapse" data-target="#demo4" onClick="changeArrow(this)">If I transfer my balance to a new Access 3 Equity Line, what will my interest rate be?</a>
You need to check if it has class, not if it is, as you have several on times. As you use jQuery you can use .hasClass(), .addClass() and removeCLass(). You might also want to look at .toggleClass().
function changeArrow(element) {
var $arrow = $(element);
if ($arrow.hasClass('background_one')) {
$arrow.removeClass('background_one');
$arrow.addClass('background_two');
} else {
$arrow.removeClass('background_two');
$arrow.addClass('background_one');
}
}
That is happening because the className also contains the class collapsed the second time it's clicked.
I used IE's debugger and found this:
Perhaps you could use contains instead of equals, like the following (untested, but should work):
function changeArrow(element){
element.className = (arrow.className.contains('background_one') ?
'background_two' :
'background_one');
}
I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.
Assuming that you don't want to use any JavaScript library (which is odd).
See: http://jsfiddle.net/JUtcX/
HTML:
<div id="content"></div>
CSS:
#content {
border: 1px solid red;
height: 1em;
padding: 2px; /* adjust to taste */
overflow: hidden
}
JavaScript:
document.getElementById("content").onclick = function() {
this.style.height = 'auto';
}
Alternatively, if you would like to use a JavaScript framework such as jQuery, you can animate it.
See: http://jsfiddle.net/JUtcX/2/
$('#content').click(function() {
var reducedHeight = $(this).height();
$(this).css('height', 'auto');
var fullHeight = $(this).height();
$(this).height(reducedHeight);
$(this).animate({height: fullHeight}, 500);
});
This is easily done using CSS + JavaScript. You just need to set the height of the div to the height of a single line, and hide all overflow. Then when the user clicks on the div, use a nice animation handler to perform a blind-down or other similar effect to show the full contents of the div.
Here is a very basic example (no animation): http://jsfiddle.net/9Lw6T/
$(document).on('click', '.collapsible', function () {
$(this).toggleClass('collapsed');
});
p {
cursor: pointer;
}
.collapsed {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="collapsible collapsed">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.</p>
<p class="collapsible">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.</p>
<p class="collapsible collapsed">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.</p>
<div id='a' onclick='toggletext'>first line<br /></div>
function toggletext(){
var html= document.getElementById('a').innerHTML;
if(html=='first line<br />'){
html = 'first line<br />next lines<br />next lines<br />';
}else{
html = 'first line<br />';
}
document.getElementById('a').innerHTML = html
}
this can be optimized and can be made to use one of the common libs
You could do this with some jQuery.
<div id="a">
<span id="first">This is the first line (read more)</span>
<br />
<span id="rest">This is the rest of the text</span>
</div>
script
$('#rest').hide();
$('#first').click(function(){
$('#rest').show();
});
http://jsfiddle.net/jasongennaro/dC32A/
In CSS set the size of the div to size of the line (important: you might need to use line spacing attribute to get proper padding on the bottom with second line).
I don't know about clicking, but you can use :hover in CSS to change the style (reset line spacing, reset div size and overflow to proper values) to get on hover-show effect.
Or you can use JavaScript and change that CSS on click (easy to do with jQuery).
Posting my comment as an answer:
Another approach could be, defining the class height: 1em; overflow-y: hidden; and then adding/removing it on click with javascript.
Or maybe you could also handle it in the :active-pseudo-class by wrapping your <div> with an <a>-tag, so no javascript would be needed. But then the div would collapse again on losing focus.
This will be sufficient:
To hide all but the first line:
var theDiv = document.getElementById('theDiv');
theDiv.style.overflowY = 'hidden';
theDiv.style.height = '1em';
To show all the text:
var theDiv = document.getElementById('theDiv');
theDiv.style.overflowY = 'visible';
theDiv.style.height = 'auto';
Or, if you were to use jQuery:
$('#theDiv').css({ height: '1em', overflowY: 'hidden' });
$('#theDiv').css({ height: 'auto', overflowY: 'visible' });
Setting the hide of the div to 1em and then exapnd it onclick is the solution.
Check this. I haven't used any JS library.
CSS
.expandable{
height:1.2em;
overflow:hidden;
}
HTML
<div class="expandable" onclick="expand(this)">Your text here</div>
JS
window.expand = function(el) {
el.style.height = "auto";
}
Here is the fiddle
http://jsfiddle.net/RwM8S/1/