i am using #id on 3 buttons to change image on Slides , but i dont want to scroll to images slide section when i click on button just want to slide image to next without scrolling to image section
here is drive video link to show how my web is looking right now https://drive.google.com/file/d/1dXMCeBNzkn2c5ChNQfOAVthNBHHsePSp/view?usp=drivesdk
<div className="carousel carousel-center max-w-md md:max-w-screen-2xl mx-auto space-x-24 ">
<div id="item1" className="carousel-item">
<img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image1" />
</div>
<div id="item2" className="carousel-item " >
<img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image2" />
</div>
<div id="item3" className="carousel-item">
<img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image3" />
</div>
</div>
Just add an event listener to your buttons and prevent the default behaviour. Add an id of "link" to the button and then add an event listener like below. If your button element contains an anchor tag, add the "link" id to anchor tag instead of button.
document.getElementById("link").addEventListener("click", (e) => {
e.preventDefault();
});
Related
Hey i am working on a css slider it is working fine without js only with css but i want to make a js script for navigation buttons for slider i mean i want to make a js script that can slide the content left or right by clicking on left or right button and it has to make a loop i mean if you click button once then it has to slide content left or right by 100% each time and max width is 1000% of the content which i want to slide can anyone please help me for this
<div class="slider-10">
<div class="slider-box" style="width: 1000%">
<img src="img/image-1.jpg" />
<img src="img/image-2.jpg" />
<img src="img/image-3.jpg" />
<img src="img/image-4.jpg" />
<img src="img/image-5.jpg" />
<img src="img/image-6.jpg" />
<img src="img/image-7.jpg" />
<img src="img/image-8.jpg" />
<img src="img/image-9.jpg" />
<img src="img/image-10.jpg" />
</div>
</div>
And i want to slide this section:
<div class="slider-box" style="width: 1000%">
<img src="img/image-1.jpg" />
<img src="img/image-2.jpg" />
<img src="img/image-3.jpg" />
<img src="img/image-4.jpg" />
<img src="img/image-5.jpg" />
<img src="img/image-6.jpg" />
<img src="img/image-7.jpg" />
<img src="img/image-8.jpg" />
<img src="img/image-9.jpg" />
<img src="img/image-10.jpg" />
</div>
Please help me
You can set any img in a div element means 1 div for every imgtag then declare a function in js and call it with onclick event for EX: click right button sends 1 to function and left one -1.
then yo can add class for every div that should show.
I have a div which i want to toggle on click of a button. Its working but the div is not hiding on click of outside button. Below is my code pls check.
<div class='settings' ng-click="showDiv = !showDiv"></div>
<div class="profileSetting text-center" ng-show="showDiv">
<div></div>
<p class="small-font">Stephen Wilson <br/> steave#gmail.com</p>
<hr>
<p class="small-font"><img src = "images/settings.png" alt = "Generic placeholder thumbnail"> settings</p>
</div>
I want this profilesetting div should be hidden on click of outside.
I have three images that each change to a second image on mouseover. On mouseover they also reset the others to the standard image. This all works fine.
However..
I would like each of the second images to be clickable links to another page.
Hope someone can help, many thanks.
$(document).ready(function(){
$('#s1').mouseover(function(){
$('#s1').attr('src', 'images/object/click-1.png');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s2').mouseover(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/click-2.png');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s3').mouseover(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/click-3.png');
});
});
So the links would need to be on click-1.png, click-2.png, click-3.png.
<div id="section3" class="container-fluid" align="center">
<div class="row row-centered ">
<div id="top-box-1" class="col-sm-4">
<img src="images/object/standard-1.jpg" id="s1" width="300" height="300" />
</div>
<div id="top-box-2" class="col-sm-4">
<img src="images/object/standard-2.jpg" id="s2" width="300" height="300" />
</div>
<div id="top-box-3" class="col-sm-4">
<img src="images/object/standard-3.jpg" id="s3" width="300" height="300" />
</div>
</div>
</div>
Just make each image tag (s1, s2, and s3) a link. The actual src attribute of the img tag can change to display whatever image you want, it's really irrelevant. After all, A user can only click on something they've moused over.
I have a banner which I need changing on a click. at the moment I have hidden the 2nd banner and currently banner 1 shows. When I click the arrow I want banner 1 to hide and banner 2 to show etc.. only problem I tried using html.
<div class="homeArrow"><img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt=""/></div>
i want homeArrow to be the click button to show next banner
but not sure how to connect to jquery...
This is JS fiddle:
http://jsfiddle.net/8a7GL/152/
Hide / Show one Banner at a time:
$(".homeArrow").on('click',function () {
$(".homeImage").slideToggle();
});
http://jsfiddle.net/8a7GL/152/
Sliding from left to right can be achieved by a little more code in jQuery see:
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/
You could also use addClass/removeClass and make the sliding CSS3 transitions. This would greatly improve quality.
UPDATE:
Here is the left / right slidy.
HTML:
<div class="homeBannerContainer" style="display: block">
<div id="a1" class="homeImage">
<h4>Banner 1</h4>
<img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" />
<div class="homeBanner">
<h3>My banner</h3>
</div>
</div>
<div id="a2" class="homeImage" style="display: none">
<h4>Banner 2</h4>
<img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" />
<div class="homeBanner" style="display: none">
<h3>My banner 2</h3>
</div>
</div>
<div class="homeArrow">
<img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt="" />
</div>
CSS:
$(".homeArrow").on('click', function () {
$('.homeImage').animate({
width: 'toggle'
});
});
DEMO:
http://jsfiddle.net/8a7GL/174/
You can use the show/hide function provided by jquery and even give it an animation.
Just give the banners a selector and use the .click event.
http://api.jquery.com/toggle/
function change(){
$("#firstbanner").toggle();
$("#secondbanner").toggle();
}
In HTML:
<button onclick="change()" />
try this:
if ($('#Banner2Home').is(":visible")) {
$('#Banner2Home').hide();
} else {
$('#Banner2Home').show();
}
return false;
I have a bit of an issue.
I have a grid of images (3x3), and have a function to swap the image, and show a "content" panel.
While the 1st 2 rows appear to show the content area properly, the bottom row goes in and out and in and out and in and out, etc...
What is causing this behavior, and how can I fix it?
Fiddle
http://jsfiddle.net/o7thwd/4s9GT/
Please excuse the hover image... seems jsfiddle doesn't like it or something... but rest assured that in the site, it works..
Code - jQuery 1.7
// panel grid image swapper
$('.panel img').mouseover(function() {
var $this = $(this);
var src = $this.attr("src").match(/[^\.]+/) + "-hover.png";
$this.attr("src", src);
// Show data panel
$('.' + $this.attr('data-panel')).show('fast');
}).mouseout(function() {
var $this = $(this);
var src = $this.attr("src").replace("-hover.png", ".png");
$this.attr("src", src);
// Hide data panel
$('.' + $this.attr('data-panel')).hide('fast');
});
HTML
<div class="panel-3-image-grid">
<div class="panel1 panel">
<img src="/core/images-tmp/panel-images/panel-3/image1.png" alt="" data-panel="panelGrid-1-content" />
<div class="panelGrid-content panelGrid-1-content">Panel 1</div>
</div>
<div class="panel2 panel">
<img src="/core/images-tmp/panel-images/panel-3/image2.png" alt="" data-panel="panelGrid-2-content" />
<div class="panelGrid-content panelGrid-2-content">Panel 2</div>
</div>
<div class="panel3 panel">
<img src="/core/images-tmp/panel-images/panel-3/image3.png" alt="" data-panel="panelGrid-3-content" />
<div class="panelGrid-content panelGrid-3-content">Panel 3</div>
</div>
<div class="panel4 panel">
<img src="/core/images-tmp/panel-images/panel-3/image4.png" alt="" data-panel="panelGrid-4-content" />
<div class="panelGrid-content panelGrid-4-content">Panel 4</div>
</div>
<div class="panel5 panel">
<img src="/core/images-tmp/panel-images/panel-3/image5.png" alt="" data-panel="panelGrid-5-content" />
<div class="panelGrid-content panelGrid-5-content">Panel 5</div>
</div>
<div class="panel6 panel">
<img src="/core/images-tmp/panel-images/panel-3/image6.png" alt="" data-panel="panelGrid-6-content" />
<div class="panelGrid-content panelGrid-6-content">Panel 6</div>
</div>
<div class="panel7 panel">
<img src="/core/images-tmp/panel-images/panel-3/image7.png" alt="" data-panel="panelGrid-7-content" />
<div class="panelGrid-content panelGrid-7-content">Panel 7</div>
</div>
<div class="panel8 panel">
<img src="/core/images-tmp/panel-images/panel-3/image8.png" alt="" data-panel="panelGrid-8-content" />
<div class="panelGrid-content panelGrid-8-content">Panel 8</div>
</div>
<div class="panel9 panel">
<img src="/core/images-tmp/panel-images/panel-3/image9.png" alt="" data-panel="panelGrid-9-content" />
<div class="panelGrid-content panelGrid-9-content">Panel 9</div>
</div>
</div>
CSS
.panel-3{height:515px;width:990px;margin:0 auto;clear:both;position:relative;z-index:1;}
.panel-3-content{width:480px;float:left;padding-top:160px;}
.panel-3-image-grid{width:475px;float:left;padding-top:20px;}
.panel-3-image-grid div.panel{width:154px;height:154px;float:left;margin-right:3px;margin-bottom:3px;}
.panel-3-image-grid div.panel:hover, .panel-3-image-grid div.panel:active, .panel-3-image-grid div.panel.active{
}
.panel-3-image-grid div.panel:last-child{margin-right:0;}
.panelGrid-content{display:none;position:absolute;width:154px;height:310px;background:#c8deed;}
.panelGrid-1-content, .panelGrid-2-content, .panelGrid-3-content{margin-top:3px;}
.panelGrid-4-content, .panelGrid-5-content{margin:-154px 0 0 157px;}
.panelGrid-6-content{margin:-154px 0 0 -157px;}
.panelGrid-7-content, .panelGrid-8-content, .panelGrid-9-content{margin-top:-314px;}
This is caused by the data panel growing until it is beneath the mouse pointer, which triggers a mouseout on the panel image, which causes the data panel to shrink until it's no longer beneath the pointer, which triggers the mouseenter on the panel image again...
The content panel gets shown on top of the image. If you look at the other rows, it is placed next to or under the image.
Because the content panel is in front of the image, the mouseover event is no longer getting fired for the image (because the mouse is now over the content panel). This is causing it to hide the content panel, which means the mouse is over the image again and a loop is formed.
To break this loop, you either need to attach the mouseover event to the .panel elements (because the mouseover event is going to bubble up there if its over either the image or the content panel) or make sure the content panel is never on top of the image.