sliding a page in html - javascript

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()

Related

Transition a DIV element while reverting transition on a another element - Using Javascript

I have php generating several DIV tags populated with information for a database.
A DIV height of 400px will display all information. However, I render the DIVs to height=50PX on the page with CSS.
example:
<div style="height: 50px">Info</div>
<div style="height: 50px">Info</div>
<div style="height: 50px">Info</div>
<div style="height: 50px">Info</div>
etc
I need some help with javascript method and functions, that will run when I click on the DIV element, the function should change the style.property.height to 400px and simultaneously reduce any other div that was expanded to 400px back to 50px. When the DIV is action i.e. it's at 400px, it should NOT change no matter how many time it's clicked on, but once click out of the DIV or another div it should revert to 50px
You can give all the divs the same class to select them by (with document.querySelectorAll) to change their styles. You can loop through all of the divs with Array.prototype.forEach to change their heights back to 50px. JSFiddle: http://jsfiddle.net/s5dLpjkg/embedded/result
var divs = document.querySelectorAll(".myClass");
var input = document.getElementById("num");
document.getElementById("transitionBtn").addEventListener("click", function(e){
var num = input.value;
var div = divs[num-1];
[].slice.call(divs).forEach(function(el){
if(el.style.height!=="50px"&&el!==div){
el.style.height = "50px";
}
});
div.style.height="200px";
});
.myClass{
background-color: dodgerblue;
border: 1px solid black;
transition: height 2s;
}
<div style="height: 50px" class="myClass">Info #1</div>
<div style="height: 50px" class="myClass">Info #2</div>
<div style="height: 50px" class="myClass">Info #3</div>
<div style="height: 50px" class="myClass">Info #4</div>
<input type="number" id="num" placeholder="Div number" min="1" max="4" style="width: 30%" value="1">
<p/>
<button id="transitionBtn">Run Transition</button>

Submit dynamical form using JQuery

I´m not really sure I can do this, but it's worth the try.
I have a table with at least 10 items coming from a Mysql database. They are items for which you can bid. The idea is that every row (therefore, every item) has a button that can be clicked to enter the bid. This button opens a popup with a text field to enter the bid and a button to submit the form.
In order to identify the item the user is bidding for, I need its id, as well as the amount bid. The amount is really easy to get, but I´m struggling a lot with the item id.
Here is what I have:
$(document).ready(function(){
$(".show").click(function() {
$("#popup").show();
var $id = document.getElementsByClassName('show')[0].value;
console.log($id);
$("#jugador").val($id);
});
$("#close, #submit").click(function() {
$("#popup").hide();
});
});
#popup {
position: relative;
z-index: 100;
padding: 10px;
}
.content {
position: absolute;
z-index: 10;
background: #ccc;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #000;
z-index: 5;
opacity: 0.4;
}
<td><button class="show" id="bid" value="<?php echo $row2["id"];?>"><img src="pictures/bidIcon.png" width="30" height="30"></button></td>
/*Popup*/
<div id="popup" style="display: none;">
<div class="overlay"></div>
<div class="content">
<header>
<div id="close">✖</div>
</header>
<form name="form1" method="post" action="bid.php">
<fieldset>
<label for="bid">Bid:</label>
<input type="text" name="bidAmount" id="bidAmount" size="8" />
<input type="hidden" name="item" id="item" />
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
<footer>
<button type="button" id="submit">Bid Now</button>
</footer>
</form>
</div>
</div>
I´ve been trying for a while with no luck. I will always get the item id for the first element no matter in which button I click.
Is it feasible what I want? Is this the correct approach? Should I use a different one?
Thanks a lot in advance.
Just change this line:
var $id = document.getElementsByClassName('show')[0].value;
To this:
var $id = $(this).val();
The problem is that with document.getElementsByClassName('show')[0].value you are querying the first occurrence of the .show button. With $(this) instead you will be accessing the current clicked button.
JQuery binds the events to the target where you attach the event, so this will always be a reference to the target of the event. Using $(this) will create a jQuery object of the target element permitting to apply jQuery functions to the element.
As a side note, you shouldn’t duplicate the elements ids. Every id must be unique in the html document, so it will be a good practice to make that id different for each button.
Hope it helps.
To access the current div element's Id you can use the ($this), which refers to the current javascript object.
$("div").click(function(){
alert($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">Num 1</div>
<div id="2">Num 2</div>
<div id="3">Num 3</div>
<div id="4">Num 4</div>
Here in this example, i have created div's which when clicked return's the id of that div.
When you do it like this var $id = document.getElementsByClassName('show')[0].value; it will always take the first element having class="show".
Which will contain the first item hence always gives the id of first item.
So instead of doing it like that you can do it like this:
var $id = $(this).val();
This will select the current item on which user has clicked so will give the id of that item.

After button is clicked , another button won't click

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'
});
});
});

How can i make buttons on a HTML page show different information

i am making an information website for a school assignment, i want to have a button/s to make different information display on the page. how do i go about doing this in HTML or other applicable languages, Thanks
Use JavaScript!
<body>
<input id="button1" type="button" value="click me">
<input id="button2" type="button" value="click me, too">
<p id="output"></p>
<script>
/* Get references to your elements. */
var button1=document.getElementById("button1");
var button2=document.getElementById("button2");
var output=document.getElementById("output");
/* Add click event listeners to your buttons so you can interact with them. */
button1.addEventListener("click",clickButton1);
button2.addEventListener("click",clickButton2);
/* Write functions to handle displaying various content depending on which button you press. */
function clickButton1(event_){
output.innerHTML="You clicked button1!";
}
function clickButton2(event_){
output.innerHTML="You clicked button2!";
}
</script>
</body>
Basically, your click event listeners handle what to display when a button is pressed. I'm just changing the text in a p element, but you could do a lot more than that. For example, store the different html you want to display in hidden divs and only display them when a button is pressed. Hope this helps!
I believe you could do this in CSS as well, the big thing to note in the example is that each <a> has the #(id of div) in the href attribute. Since I don't know the exact context for your predicament, I can't say this would work how you want it to, but I just really dislike using javascript if I don't have to.
.container > div {
display: none
}
.container > div:target {
display: block;
}
ul.nav {
list-style-type: none;
}
ul li {
display: inline-block;
width: 100px;
}
ul li button {
border: 1px solid grey;
border-radius: 2px;
padding-left: 5px;
box-sizing: padding-box;
}
<ul class="nav">
<li>
<button>Tab 1
</button>
</li>
<li>
<button>Tab 2
</button>
</li>
<li>
<button>Tab 3
</button>
</li>
<li>
<button>Tab 4
</button>
</li>
<li>
<button>Tab 5
</button>
</li>
</ul>
<div class="container">
<div id="firstTab">Hello Tab 1</div>
<div id="secondTab">Hello Tab 2</div>
<div id="thirdTab">Hello Tab 3</div>
<div id="fourthTab">Hello Tab 4</div>
<div id="fifthTab">Hello Fifth Tab</div>
</div>

Grouping elements for focus/onblur events?

I have an autocomplete div which appears when the user keyup's in a search field. I want the div to disappear when they click outside of the div, so I have tried the following:
//SHOW THE DIV WHEN INPUT CLICKED
$('#searchbar').focus(function(){
$('#div').show();
});
//HIDE THE DIV WHEN FOCUS LOST
$('#searchbar').on("blur", function(){
$('#div').hide();
});
Unfortunately, the div which houses the autocomplete choices contain tags that I want the user to click. As soon as the user clicks a link, the div disappears (because focus from the input field is lost).
So is there any way to 'group' the div with the input field so they can both be 'focussed' when the input is active, or div is clicked?
Regards, and thank you in advance!
EDIT: Here is my HTML
<div class="appBar">
<table class="abTable">
<tr>
<td><b><span style="color:white;">gelDB</span></b></td>
<td><input id="sbar" type="text" name="searchBar" class="searchBar" placeholder="Search for entries..." /></td>
<td>
<img class="navButton" alt="" src="images/btn_new.png" style="width: 50px; height: 50px" />
<img class="navButton" alt="" src="images/btn_browse.png" style="width: 50px; height: 50px" />
<img class="navButton" alt="" src="images/btn_proto.png" style="width: 50px; height: 50px" />
<img class="navButton" alt="" src="images/btn_permis.png" style="width: 50px; height: 50px" />
</td>
<td>
<button class="menuButton"></button>
</td>
</tr>
<div class="menuButtonDiv"></div>
</table>
</div>
</head>
<br/>
<body>
<div id="acd" class="autoCompleteDiv">No results. Try searching something else.<hr></div>
Here is a graphical example of what I'm doing:
Figured it out, had to use the following code:
$('#sbar').on("blur", function(){
if ($('#acd').is(':hover')) {}
else{$('#acd').hide();};
});
Basically it states to hide the div unless the mouse is currently over (hovering over) the div.
try this:
<div id="box">
<a href="#">link<a>
<div>
_
$( "body" ).click(function() {
// if the element that was clicked is #box OR any child of #box
if($(event.target).is( "#box, #box > *" )) {
} else {
alert("outside the box");
}
});
demo: http://jsfiddle.net/J9yzj/2/

Categories