i coded a slide to slip left to right but i don't know why it just runs once time, it does run a first image again when it run last image.Anyone help me,sorry for my bad english. hope you undertands.
HTML
<img src="Britney-Spears.jpg" class="img" />
<img src="Britney-Spears-101[1].JPG" class="img" />
<img src="Britney-Spears-Wallpaper-18.jpg" class="img" />
</div>
CSS
.neoslideshow {position:relative; width:500px; height:260px;
background:#0C9; overflow:hidden;} .neoslideshow img
{position:absolute; top:0;width:400px; height:260px;}
JQUERY
$(document).ready(function() {
$('.neoslideshow img:gt(0)').css('left',-500);
function slide()
{
$('.neoslideshow :first-child').animate({left:"+=500"},"slow").css('left',-500)
.next('img').animate({left:"+=500"},"slow").css('left',-500)
.end().appendTo('.neoslideshow');
};
setInterval(function(){slide();},2000);
});
Related
How can I handle elements that are inside iframe which are again inside a shadow Dom using watir 7.2?
Something like this:
<div id="test">
#shadow-root (open)
<div id= "test1">
<iframe id= "iframe">
<input id = "text field">
Code-
shadow_host=#browser.div(id: 'test')
shadow_root=shadow_host.shadow_root
iframe= shadow_root.iframe(id: 'iframe').wai_until(&: present?)
iframe.text_fied(id: 'text field').set(params[:expiry] ||12345)
Please let me know what mistake I am doing?
I need to make my button click to reveal the textarea so the user can choose between uploading either an image or a text message. I can see the hidden/visible element kicking in when I run the page but it doesn't remain in the new state. It immediately reverts back to whatever it was originally set as.
I'm guessing that I'm not escaping the script properly. Any thoughts?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Site Media</title>
</head>
<header id="headtitle">
</header>
<body>
<div id="PostContainer"><br>
<textarea id="textmessage" rows="7" cols="40" maxlength="280" placeholder="Enter message here..." width="100%" style="visibility: hidden"></textarea><br>
<form class="UploadButtonContainer">
<button id="textbutton" type="submit" name="submit" onclick="revealinput()" style="display: none;"></button>
<label for="textbutton" style="cursor: pointer;" ><img src="Images/AYE PING.png" width="30%" alt="Choose Text Post" >
</label>
</form>
<script>
function revealinput() {
var x = document.getElementById("textmessage");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
</div>
</body>
</html>
The script didn't like the button being inside a tag. I changed it to a tag and it works now.
Hi I am showing items from library to the main page using Content Query. TO scroll this items i am using Marquee now i want to stop when OnMouseOver and again start on out i use onmouseover="stop()" onmouseout="start()" and button to stop but its not working please is the code i have. Can anyone help how use or is there any option. Thank you.
<marquee id="test" bgcolor="rgba(235,235,235,0.8)" scrolldelay="10" direction="up" scrollamount="2" style="width: 435px; height: 252px;">
<div>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
<div class="ms-rtestate-notify ms-rtestate-read 7678e8de-25e2-420f-a052-a9ae8bd6a173" id="div_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on">
</div>
<div id="vid_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on" style="display: none;">
</div>
</div>
<style>
#WebPartWPQ2 a {
color:#000000 !important;
}
</style></div></marquee>
Looks like, if I understand you correctly, you would like to add a MouseOver and MouseOut effect to a marquee. If that is correct. all you needed to do is tell the browser that you wanted THIS marquee and it would have worked. your code right now does not say which marquee you want the JavaScript to work towards.
syntax = some-event="(What)*Target****.*(Which)action();"
this.stop(); or this.start
onMouseOver="this.stop();"
Hope this is what you were looking for. If not could you rephrase your
question. I had a hard time understanding you.
<style>
#WebPartWPQ2 a {
color: #000000 !important;
}
</style>
<marquee onmouseover="this.stop();" onmouseout="this.start();" id="test" bgcolor="rgba(235,235,235,0.8)" scrolldelay="10" direction="up" scrollamount="2" style="width: 435px; height: 252px;">
<div>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
<div class="ms-rtestate-notify ms-rtestate-read 7678e8de-25e2-420f-a052-a9ae8bd6a173" id="div_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on">
</div>
<div id="vid_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on" style="display: none;">
</div>
</div>
</div>
</marquee>
I'm using Masonry and imageLoaded to load a wall of images : everytime an image is loaded, masonry layout is refreshed.
This works as intended, but problem is that most of the time, Masonry will move already loaded items to another position on refresh. Is there a way to force Masonry to keep already arranged items where they are ?
All the image have the same width (but not the same height).
HTML (with Bootstrap) :
<div class="container-fluid">
<div id="gallery">
<div class="item col-sm-3">
<img src="1.jpg" alt="">
</div>
<div class="item col-sm-3">
<img src="2.jpg" alt="">
</div>
<div class="item col-sm-3">
<img src="3.jpg" alt="">
</div>
<!--more items -->
</div>
</div>
JS :
// hide images
$('.item img').hide();
//init Masonry
var $grid = $('#gallery').masonry({
itemSelector: '.item',
transitionDuration: 0,
percentPosition: true,
});
// fade in and layout Masonry after each image loads
imagesLoaded(".item img").on( 'progress', function( instance, image ) {
$(image.img).fadeIn();
$grid.masonry('layout');
});
I have the same issue (fixed width, different height and I want fixed items) and I resolve with the following code:
//Here I attach the new loaded items (html var) in the #container div.
$("#gallery").append(html).each(function(){
$('#gallery').masonry('reloadItems');
});
$('#gallery').imagesLoaded(function(){
$('#gallery').masonry();
});
If you want to see it working and the effect, you could visit http://pintevent.com to see if is the same desired behavior. Hope it helps!
I'm trying to align four pictures with their captions in a square grid.
I'm using the following HTML code:
<div class="grid">
<div class="post-block">
<img src="img1.jpg" />
<div class="caption">caption1</div>
</div>
<div class="post-block">
<img src="img2.jpg" />
<div class="caption">caption2</div>
</div>
<div class="post-block">
<img src="img3.jpg" />
<div class="caption">caption3</div>
</div>
<div class="post-block">
<img src="img4.jpg" />
<div class="caption">caption4</div>
</div>
</div>
and the following CSS code:
.post-block {
display: inline-block;
position: relative;
text-align: center;
}
If images and captions are the same size everything is ok, but when they are different I get this (an example):
I've tried to align images and captions of different sizes using CSS with no success. I need something like this:
Any help would be appreciated.
Thanks in advance
You'll need to use separate block elements at the same DOM level for the image and the caption to achieve what you've shown in the "RIGHT" image. Right now your caption DIV is nested inside the image DIV, and that's gonna do what you've shown. The caption DIV needs to be outside the image DIV.
You will probably want two separate div wrappers around each 2 photos..
Then align images vertically to bottom.
Vertical align images to bottom
<div class="myWrapClass">
<img src="my image">
<img src="my image">
</div>
<div class="myWrapClass">
<img src="my image">
<img src="my image">
</div>
then set the styling via inline or your css file
<div style="vertical-align:bottom;">
or
.myWrapClass{
vertical-align:bottom;
}
check out this site... Use the css properties there to keep it responsive
Example