I'm trying to make a content slider just like youtube
And here is mine..
My content slides to right or left perfectly by 800px. But here's the problem.. When I click on the left icon first , Then clicking on the right icon won't work! Could there be a solution to this..?
Javascript:
$(document).ready(function(){
$("#trendingnexticon").on('click' ,function(){
$("#trendingtable").animate({right: '+=800px'});
});
});
$(document).ready(function(){
$("#trendingpreviousicon").on('click' ,function(){
$("#trendingtable").animate({left: '+=800px'});
});
});
HTML:
<div id="trendingdiv" class="" style="overflow-x:scroll; overflow: hidden;">
<table id="trendingtable" class="table" style="position:relative;">
<a id="trendingpreviousicon" style="cursor:pointer; margin-top: 62px;
position:absolute; z-index:1;" class="previous round">‹</a>
<a id="trendingnexticon" style="cursor:pointer; margin-left: 1250px;
margin-top: 62px; position:absolute; z-index:1;" class="next round">›
</a>
<tr>
<?php while ($tsingers = mysqli_fetch_assoc($tsingersquery)): ?>
<td>
<div class="media" style="border: 1px solid #e6e6e6; width:400px;
padding: 0px;">
<img src="images/<?=$tsingers['image'];?>" alt="<?
=$tsingers['name'];?>"
class="pull-left img-responsive" style="width: 200px; height:
150px;" id="artistimg">
<div id="trendingmediabody" class="media-body">
<p id="trendingname" style="font-size:14px; font-weight:
bolder;"><?=$tsingers['name'];?></p>
<p id="trendingcategory" style="font-size:12px; font-weight:
bolder;"><?=$tsingers['category'];?></p></br></br>
</div>
</div>
</td>
<?php endwhile; ?>
</tr>
</table>
</div>
The "left" and "right" attributes are conflicting.
$(document).ready(function(){
$("#trendingnexticon").on('click' ,function(){
$("#trendingtable").animate({right: '+=800px'});
});
$("#trendingpreviousicon").on('click' ,function(){
$("#trendingtable").animate({right: '-=800px'});
});
});
P.S.: I also removed the double $(document).ready since one is enough.
Heyo, you only need one $(document).ready(), you can put both functions inside that one.
Try check on the inspector to see if after the slide animation something doesn't overlap the button
I'm going to take a guess and say that it is because you are animating left and right instead of one or the other. left doesn't mean "move left", it means, "set the left CSS style property". And left means "where does my left border belong relative to my nearest relative parent".
Read a bit more about the left and position CSS properties.
Try this instead:
$(document).ready(function () {
$("#trendingnexticon").on('click', function () {
$("#trendingtable").animate({
left: '-=800px'
});
});
$("#trendingpreviousicon").on('click', function () {
$("#trendingtable").animate({
left: '+=800px'
});
});
});
Related
I am using onclick method on a link in order to display a div. However, the div disappears after displaying for a second.
function view() {
document.getElementById('topmenu').setAttribute('style', 'display:block');
}
#topbar {
background-color: yellow;
overflow: auto;
}
#topmenu {
display: none;
}
<header>
<div id="topbar">
<img src="/images/santorini-wedding-photographer-logo.png" style="float: left;">
<span style="float: right;">MENU</span>
</div>
<div id="topmenu">
some text here
</div>
</header>
Your anchor tag has a href attribute, which is following the link and changing the page contents. Remove the HREF ( which is actually a bad idea ), or better yet; use a span or something instead.
FYI: There are also multiple other solutions available to keep the href, but prevent the page from changing location.
function view() {
document.getElementById('topmenu').setAttribute('style', 'display:block');
}
#topbar {
background-color: yellow;
overflow: auto;
}
#topmenu {
display:none;
}
<header>
<div id="topbar">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/santorini-wedding-photographer-logo.png" style="float: left;">
<span style="float: right;"><a onclick="view()">MENU</a></span>
</div>
<div id="topmenu">
some text here
</div>
</header>
In your anchor tag, set your href to href="#!" so that the event doesn't propagate. And your code for the div to show works as expected.
It would also work with href="#", but this would take you back to the top of the page in case you're somewhere at the bottom.
I am using JQuery for this:
Taking complete html and appending into a new div
My JQuery code:
$(document).ready(function(){
$("#addNew").click(function(){
var maindiv = document.getElementById('nestedFeilds').html();
$("#showhere").append('maindiv');
});
});
The HTML is pretty complex and lengthy so take just reference
<div class= "row" id="mainContainer">
<label for="Education" style="margin-left: 30px ; float:left;">Education</label>
<div class="col-xs-4 inner"></div>
<div class="col-xs-8 verticalLine" id="nestedFeilds" style=" margin-left: 10px ;float:left; display: none;">
In the last div, it is actually a form and I need its complete html to be shown with different name attribute when ever I click button
I am calling my function like this
<div id= "showhere"></div>
<div style="margin-left: 133px;float:left;">
<a id="addNew"> Add Education</a>
</div>
If you want to get innerHTML, you should use element.innerHTML, and if you want to append previously saved inner HTML, you can use element.append(variableWithPreviousInnerHTML). Here is the working example:
$(document).ready(function() {
$("#addNew").click(function() {
var maindiv = document.getElementById('nestedFeilds').innerHTML;
$("#showhere").append(maindiv);
});
});
div {
width: 100px;
height: 100px;
border: 1px gray solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nestedFeilds">Content from #nestedFeilds</div>
<div id="showhere"></div>
<button id="addNew">Click</button>
If anything isn't clear, feel free to ask.
I know that there are many questions like that, but I couldn't find a solution to my problem.
In my single page application(with metro style) when I go back from a widget to home I would like to set the scroll position back where it was before entering the widget.
<div id="overflow" class="mCustomScrollbar _mCS_9" style="width: 1855px;">
<div id="mCSB_9" class="mCustomScrollBox mCS-jmsHorizontalScrollbar mCSB_horizontal mCSB_inside" style="max-height: none;" tabindex="0">
<div id="mCSB_9_container" class="mCSB_container" style="position: relative; top: 0px; left: 0px; width: 8360px;" dir="ltr">
<div class="page" id="dashboard_all" style="width: 8360px;">
</div>
</div>
<div id="mCSB_9_scrollbar_horizontal" class="mCSB_scrollTools mCSB_9_scrollbar mCS-jmsHorizontalScrollbar mCSB_scrollTools_horizontal" style="display: block;">
<div class="mCSB_draggerContainer">
<div id="mCSB_9_dragger_horizontal" class="mCSB_dragger" style="position: absolute; min-width: 30px; display: block; width: 403px; max-width: 1805px; left: 0px;" oncontextmenu="return false;">
<div class="mCSB_dragger_bar"></div>
</div>
<div class="mCSB_draggerRail"></div>
</div>
</div>
</div>
</div>
This is the code that the plugin creates when I apply it to the div #overflow
$(document).ready(function() {
$("#overflow").mCustomScrollbar({
axis:"x",
theme:"jmsHorizontalScrollbar",
scrollButtons: {
enable: true
},
scrollInertia: 950,
callbacks:{
onScroll:function(){
//this functions sets the value in another js file. -(this.mcs.left) to get a positive value
getNavigator().setScrollLeft(-(this.mcs.left));
},
alwaysTriggerOffsets:false
}
});
})
Then I use the position found in the callback like that
$("#overflow").mCustomScrollbar("scrollTo",scrollLeft);
But nothing happens.
If I try to put a value like 3000, sometimes #overflow scrolls, but the scrollbar stays at the initial position.
Thank you in advance,
Matteo
I did it! I used the scrollTo method in the onUpdate callback
onUpdate:function(){
$("#overflow").mCustomScrollbar('scrollTo',position, {
// scroll as soon as clicked
timeout:0,
// scroll duration
scrollInertia:0,
});
}
I am sorry if this is covered somewhere else but I have not been able to find it. I am trying to create an area of my page with three <div>s that rotate on top of each other. I have written this css and code:
#block {
width:1202px;
height: 402px;
overflow: hidden;
margin: auto;
}
.content {
width:1200px;
height:400px;
margin: auto;
}
<div id="block">
<div class="content">
<a name=image1></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
<div class="content">
<a name=image2></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
<div class="content">
<a name=image3></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
</div>
<table style="margin: auto; width:20px;">
<tr>
<td>•</td>
<td>•</td>
<td>•</td>
</tr>
I have not yet played with the formatting as right now it is just theory, but can you tell me how to make the 3 content divs rotate so that each displays for 10 seconds then moves to the next eventually rotating back to the beginning.I know this will likely require php or jquery, but I am uneducated in both.
Thank you for any help that you can offer.
My html page is divided into many div
<div id=1> //content1</div>
<input type="button" value="Go to div 2" />
<div id=2> //content2 </div>
My div having id=2 is too below on the page. I want that whenever I click the button the div having id 2 slides up and reaches at the starting of the page.
If you don't want to simply use an anchor or ID reference and want to animate it, just use animate.
Here's a fiddle : http://jsfiddle.net/zMGnQ/
#div1, #div2 {
height: 400px;
background: #00aa00;
margin: 20px;
padding: 20px;
}
<div id='div1'> //content1</div>
<input id='but' type="button" value="Go to div 2" />
<div id='div2'> //content2
$('#but').click(function(){
$('body').animate({
scrollTop: $('#div2').offset().top
})
})
Try something like $("#2").slideUp() Check here for more info on JQuery SlideUp()