I have a UL of DIV's. The when the DIVs are clicked the page should animate slide open displaying information about the topic clicked. This works fine. I have now added code see below, to add a page 2 that will overwrite the divs above with new topics. On page load you can click the divs to see the information. But after selecting next page, when clicking on the divs. nothing happens. For testing i have only rearranged the divs. so i know the id names are the same. I am fairly new at this but i feel as if there may be an easier way to do this. Also i have wondered if in the code to animate the upper and lower div. after its changed would it be upperhidden now? Any help would be appreciated. I feel as if i did a horrible job explaining what to do. but i can provide what ever is needed.
UPDATE:
Thanks. I will try this again. i have a site. that has 2 rows of 3. These are images such as:
password | HMS | pluto
citrix | java | email
button1
say you click password the page opens like below the top row animates up and bottom row animates down and information opens between them
password | HMS | pluto
pw reset info
citrix | java | email
button1
This aspect all works correctly. I have added the code that will replace the top and bottom rows. for testing i have it where the bottom goes to top and vise versa. When button1 is click screen changes like this.
citrix | java| email
password | HMS | pluto
button2
Once at this lay out say you click password it should open to show this
citrix | java | email
PW reset Info
password | HMS | pluto
button2
But this operation is not working. once the items are changed from the jquery code $('#upper').html(jQuery("#upperhidden").html()); when you make a selection the divs do not open to show the information. Note button 2 sets the divs back to as the are on page load. Even going back to main they will not open/raise/lower.
Maybe this explains the question a little better.
Javascript
jQuery(document).ready(function() {
var divClone = $("#upper").clone();
var divClone1 = $("#lower").clone();
$("#button1").hide();
$("#button1").click(function(event) {
$("#car").show();
$("#button1").hide()
$("#upper").replaceWith(divClone.clone());
$("#lower").replaceWith(divClone1.clone());
});
});
jQuery(document).ready(function() {
$("#car").click(function() {
$('#upper').html(jQuery("#upperhidden").html());
$('#lower').html(jQuery("#lowerhidden").html());
$("#car").hide();
$("#button1").show();
});
});
$(function()
{
var closed = true;
$('.password').click(function()
{
if (closed = true)
{
$("#upper").animate({'top' : '-200px'}, {duration: 400});
closed = false;
$("#maininfo").animate({'top' : '200px'}, {duration: 000});
closed = false;
$("#lower").animate({'top' : '400px'}, {duration: 400});
closed = false;
$("#filler").animate({'top' : '400px'}, {duration: 400});
closed = false;
var output = document.getElementById("maininfo");
var sentence = '<h4>PASSWORD RESET</h4>';
var open = true;
output.innerHTML = sentence;
}
else
{
}
});
});
function callShell(){
var objShell = new ActiveXObject("WScript.shell");
objShell.run('rundll32.exe user32.dll,LockWorkStation');
}
CSS
#upper, #lower {
background: #849794;
height: 300px;
position: relative;
z-index: 10;
}
#upper {
/* For IE */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000');
}
#upper ul {
height: 100%;
padding-top: 35px;
}
#upper ul li {
display: inline-block;
height: 230px;
width: 230px;
margin: 0 auto;
margin-left: 30px;
}
#lower {
background: #849794;
height: 300px;
overflow: hidden;
/* For IE */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#000000');
}
#lower ul {
height: 100%;
padding-top: 35px;
}
#lower ul li {
display: inline-block;
height: 230px;
width: 230px;
margin: 0 auto;
margin-left: 30px;
}
#filler {
width: 100%;
background: #849794;
height: 400px;
position: relative;
}
.password {
background: url(../images/pr1.png);
background-size: 100%;
}
.password:hover {
background: url(../images/pr2.png);
background-size: 100%;
}
.password:active {
background: url(../images/pr3.png);
background-size: 100%;
}
<div id="main">
<div id="upper">
<ul id="upper1">
<!-- TOP BUTTONS -->
<li class="password"></li>
<li class="enable"></li>
<li class="abstract"></li>
<!-- TOP BUTTONS -->
</ul>
</div>
<div id="upperhidden" style="display:none">
<ul>
<!-- TOP BUTTONS PAGE 2 -->
<li class="abstract"></li>
<li class="citrix"></li>
<li class="password"></li>
<!-- TOP BUTTONS PAGE 2 -->
</ul>
</div>
<div id="maininfo">
</div>
<div id="lower">
<ul id="lower1">
<!-- BOTTOM BUTTONS -->
<li class="threem"></li>
<li class="citrix"></li>
<li class="cerner"></li>
<!-- BOTTOM BUTTONS -->
</ul>
</div>
<div id="lowerhidden" style="display:none">
<ul>
<!-- BOTTOM BUTTONS PAGE 2 -->
<li class="password"></li>
<li class="enable"></li>
<li class="abstract"></li>
<!-- BOTTOM BUTTONS PAGE 2 -->
</ul>
</div>
<div id="filler">
<button id="car">Next Page</button>
<button id="button1">Prev Page</button>
</div>
</div>
the only biggie i see is in the JS code
if (closed = true)
you are missing an =
if (closed == true)
but, yes, there is an easier way to do this without the "UL of DIV's"
use $('.password').on('click', function() { //do stuff here; }); instead of $('.password').click(). the .on('click', ...) function recognizes dynamically added elements to the DOM so the click will register for your newly cloned elements
EDIT - simple demo below http://jsfiddle.net/swm53ran/431/
$(document).ready(function() {
$('.password').on('click', function() {
if ($(this).hasClass('open')) {
$('.content').fadeOut(500);
$('.bottom').animate({ marginTop: "0px" }, { duration: 1500, queue: false } );
$('.top').animate({ marginTop: "0px" }, { duration: 1500, queue: false });
var html = '';
$(this).removeClass('open');
}
else {
$(this).addClass('open');
$('.bottom').animate({ marginTop: "+140px" }, { duration: 1500, queue: false });
$('.top').animate({ marginTop: "-70px" }, { duration: 1500, queue: false });
var html = 'this is the password stuff that goes in this place.';
$('.content').html(html).fadeIn(3000);
}
});
$('.btn1').on('click', function() {
var newtop = $('.top').clone(true).removeClass('top').addClass('bottom');
var newbot = $('.bottom').clone(true).removeClass('bottom').addClass('top');
$('.upper').html('').append(newbot);
$('.lower').html('').append(newtop);
});
});
li {
display: inline-block;
padding: 10px;
border: 1px solid black;
}
.main {
margin-top: 100px;
margin-bottom: 100px;
}
.btnDiv {
display: inline-block;
margin-left: 100px;
}
.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="upper">
<ul class="top">
<li class="password">password</li>
<li class="hms">HMS</li>
<li class="pluto">pluto</li>
</ul>
</div>
<div class="content"></div>
<div class="lower">
<ul class="bottom">
<li class="citrix">citrix</li>
<li class="java">java</li>
<li class="email">email</li>
</ul>
</div>
</div>
<div class="btnDiv">
<button class="btn btn1">switch</button>
</div>
Related
Hi I have a question regarding the issue as title.
There is Page 1 with jQuery controlling to show the div, section 1 and section 2, as below.
$('.section2,.click1').fadeOut(0);
$('.click2').on('click', function() {
$(this).fadeOut(0);
$('.section1').fadeOut();
$('.section2, .click1').fadeIn();
});
$('.click1').on('click', function() {
$(this).fadeOut(0);
$('.section2').fadeOut();
$('.section1, .click2').fadeIn();
});
a {
display:block;
}
.section-wrapper {
position: relative;
width:400px;
height: 140px;
}
.section-box {
width: 100%;
height: 100%;
}
.section1 {
background: red;
}
.section2 {
position: absolute;
top: 0;
left: 0;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="click2">Click to section2.</a>
<a class="click1">Click to section1.</a>
<div class="section-wrapper">
<div class="section-box section1">
I am section 1, default section.
</div>
<div class="section-box section2" id="Section2">
I am section 2.
</div>
</div>
However, when I am at Page 2, there's a button need to link me to the section 2.
Go to Page 1 Section 2
How can I call the jquery function to show the section 2 and hide the section 1?
This is more generic
$(function() {
$('.click').on('click', function() {
let sectionNumber = $(this).data("section");
$(".click").show();
$(this).fadeOut(0);
$('.section-box').not(".section"+sectionNumber).fadeOut();
$('.section'+sectionNumber).fadeIn()
});
let hash = "#section2" // change to location.hash when happy
let section = hash ? hash.substring(1).replace("scrolldown&","") : "section1";
if (hash) {
let sectionNumber = hash.replace(/\D+/,"");
$("[data-section="+sectionNumber+"]").click()
}
});
a {
display: block;
}
.section-wrapper {
position: relative;
width: 400px;
height: 140px;
}
.section-box {
width: 100%;
height: 100%;
}
.section1 {
background: red;
}
.section2 {
position: absolute;
top: 0;
left: 0;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="click" data-section="2">Click to section 2.</a>
<a class="click" data-section="1">Click to section 1.</a>
<div class="section-wrapper">
<div class="section-box section1">
I am section 1, default section.
</div>
<div class="section-box section2" id="Section2">
I am section 2.
</div>
</div>
You could check for hash tag in page url and show/hide the element.
Edited
$(document).ready(function(){
if(window.location.hash) {
var hashVal = window.location.hash.substring(1);
if(hashVal == "Section2"){
var divId = "#"+hashVal; //id of the section 2 element
$('.section1').fadeOut();
$('.section2, .click1').fadeIn();
var pos = $(divId).offset().top; //top position relative to the document
$('body, html').animate({scrollTop: pos});
}
} else {
// No hash value
}
});
The thing is that I need to make a vertical images slider,so that when i press arrow down/arrow up every image changes it's position (the highest one goes bottom,the previous take it's place)
what it should look like:
what i have got so far:
$(function(){
var $vsliderboxes = $('#vsliderboxes'),
$vslidernav = $('#vslidernav'),
boxHeight = $vsliderboxes.height(),
current_index = 0;
function clickslide(){
clearInterval(intervalTimer);
clearTimeout(timeoutTimer);
timeoutTimer = setTimeout(function () {
intervalTimer = window.setInterval(autoslide, 2000);
}, 2500);
var index = $(this).index();
current_index = index;
$vsliderboxes.children().stop().animate({
top : (boxHeight * index * -1)
}, 500);
}
function autoslide(){
current_index++;
if (current_index >= $vsliderboxes.children().children().length) {
current_index = 0;
}
$vslidernav.find('a').eq(current_index).trigger('click');
}
$vslidernav.find('a').click(clickslide);
var intervalTimer = window.setInterval(autoslide, 2000),
timeoutTimer = null;
});
#vslidernav ul {
list-style: none;
padding: 0;
}
#vslidernav ul a {
padding: 0;
cursor: pointer;
height: 50px;
}
#vslidernav ul a:active {
color: #9C9A99;
}
#vslidernav ul a li {
height: 50px;
}
#vslidernav ul .active li {
}
.#vslidernav ul a:active {
background: transparent;
color: #9C9A99;
}
.vslider {
display: inline-block;
}
#vslidernav {
float: left;
width: 100px;
z-index: 1;
height: 250px;
}
#vsliderboxes {
position : relative;
overflow : hidden;
}
#vsliderboxes div {
height: 250px;
width: 900px;
}
#vsliderboxs-inner {
position : relative;
width : 900px;
height : 250px;
}
<div class="vslider">
<div id="vslidernav">
<ul>
<a id="1">
<li><img src="img/arrtop.gif"></li>
</a>
<a id="2">
<li><img src="img/arrdown.gif"></li>
</a>
<a id="3">
<li></li>
</a>
</ul>
</div>
<div id="vsliderboxes">
<div id="vsliderboxs-inner">
<div id="box1" class="active"><img src="img/slide1.gif"></div>
<div id="box2" class="inactive"><img src="img/slide2.gif"></div>
<div id="box3" class="inactive"><img src="img/slide3.gif"></div>
</div>
</div>
</div>
thanks for any advice
I think, that it isn't possible to solve this issue like you try to.
Because, when you work with the "top" property, you can't take one image from the top and append it to the other end because appending the image, will move the other images to another place --> the top property wouldn't be correct any more.
I think the contributed sliders (e.g. http://www.jssor.com/demos/vertical-slider.slider) work with the transform CSS property.
transform: translate3d()
Try to research about this property.
Roko C. Buljan answered on this page: loop carousel jquery
He uses a scrollTop loop for your problem.
I've also written a simple slider some time ago. I have now implemented the Roku C. Buljan method. Feel free to look at my code on Bitbucket.
https://bitbucket.org/d-stone/jqueryslider
An excerpt may help you:
value = prev_or_next == 'next' ? self.globals.slide_height : 0;
last = $('#container').find('> div:last');
first = $('#container').find('> div:first');
if(prev_or_next == 'prev') { // click on "next"-button
first.before(last); // put last element before first
settings.elements.inner.scrollTop(self.globals.slide_height); // set the scrollTop to 1 slide-height
}
// animation itself:
$('#container').stop().animate({scrollTop: value}, {
duration: settings.slide_speed,
done: function() {
if(prev_or_next == 'next') {
// put first item after last
last.after(first);
}
}
});
I'd advise you to validate your HTML (W3C Validator). There are some errors inside.
Invalid HTML can be the reason for some CSS and Javascript Errors.
I have a website page with four sections which are 100% width and height, and I'm using scrollify so the browser window always snaps to a section.
I have a fixed header that I want to display only while either of the middle two sections (#b and #c) are in view.
I'd like for this header to fade in and fade out. It should be gone by the time section #a or #d is snapped to.
I'm a novice at writing Javascript, so a fully functional solution which works with my code snippet would be much appreciated.
$(function() {
$.scrollify({
section: "section",
easing: "swing",
scrollSpeed: 500,
offset: 0,
scrollbars: true,
before: function() {},
after: function() {},
afterResize: function() {}
});
});
body {
width: 100%;
margin: 0;
}
#header {
background: rgba(0, 0, 0, 0.8);
z-index: 1;
width: 100%;
height: 50px;
position: fixed;
top: 0;
left: 0;
}
section {
width: 100%;
height: 100vh;
}
#a {
background: #aaa;
}
#b {
background: #bbb;
}
#c {
background: #ccc;
}
#d {
background: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/0.1.11/jquery.scrollify.min.js">
</script>
<div id="header">
</div>
<section id="a">
</section>
<section id="b">
</section>
<section id="c">
</section>
<section id="d">
</section>
You can use before event of scrollify. In this event you should get a current slide with the method $.scrollify.current(); You can find all available methods here! And depending on your slide you can hide or show your header.
Simply use if (){} else {} construction.
Example:
if (currentSlide != 1 || currentSlide != 3) {
header.show();
} else {
header.hide();
}
or just add some class to header
if (currentSlide != 1 || currentSlide != 3) {
header.addClass('is-shown');
} else {
header.removeClass('is-shown');
}
https://jsfiddle.net/2Lo92L6s/
You can solve it by jquery.you have to capture section load event and check the section id.if its is #a or #d you have to use:
if(id == "a" or id == "b")
{
$("#header").hide();
}
else{
$("#header").show();
}
I have a task at work where I must implement a simple browser-based chat system for an intranet. Backend is ready, and now I'm trying to create the UI part but it's giving me a big headache, and been banging my head against the desk for hours because of this :(
Here's my JSFiddle: http://jsfiddle.net/2PMvM/ (it uses JQuery + JQueryUI - 1.x)
The HTML, semantically, looks right, but it doesn't work as good as it looks. The idea is that the window (red border div) should contain all of its elements. I don't know why the list's horizontal scrollbar and then my textarea get out of the window, as if there's some offset I'm not taking into account?
I'm trying to do this with the least JS possible, but if the CSS way is too complicated, I'm willing to take a JS solution then.
What could be wrong though?. Thanks in advance :)
--- SO requires me to put the code, so here it goes:
Note: be sure to include this JS: https://github.com/AndrewDryga/jQuery.Textarea.Autoresize/raw/master/js/jquery.textarea.autoresize.js because it is required so my textarea autosizes when it gets more text. The window should contain the textarea even if it resizes. Seems like CSS could do it, but no?
IT IS SOLVED!! Thanks to #Trevor: Here's the updated code + Fiddle HERE. Thanks!
HTML:
<div class="window">
<div style="height: 20px;" class="wndHandle">Some username :D</div>
<div class="content" id="chatDiv" style="background:#fff;overflow: scroll;">
<ul class="ulChat">
<li class="msg in">Test message for testing 1</li>
<li class="msg out">Test message for testing 2</li>
<li class="msg out">Test message for testing 3</li>
<li class="msg in">Test message for testing 4</li>
</ul>
</div>
<div class="footer">
<textarea style="width: 100%; resize: none; overflow-x: hidden;" rows="1" cols="1"></textarea>
</div>
</div>
CSS:
.ui-resizable-handle
{
background: #f5dc58; border: 1px solid #FFF;
width: 9px; height: 9px;
z-index: 2;
}
.ui-resizable-se { right: -5px; bottom: -5px; }
.window
{
position: absolute;
display: inline-block;
width: 150px;
height: 200px;
border: 1px solid #bb0000;
}
.wndHandle {
cursor: move;
font-size: 9pt;
background: #888;
color: #fff;
padding-left: 1px;
}
Javascript:
var refresh = function() {
var objWindow = $('.window');
var objHandle = objWindow.find('.wndHandle');
var objContent = objWindow.find('.content');
var objFooter = objWindow.find('.footer');
var objResize = objWindow.find(".ui-resizable-handle.ui-resizable-se");
objResize.removeClass("ui-resizable-autohide");
objContent.height(
objWindow.innerHeight() -
objHandle.outerHeight() -
(
(objFooter.length == 0) ?
(objResize.length == 0) ? 0 : objResize.outerHeight()
: objFooter.outerHeight()
)
);
}
$('.window').draggable({ handle: '.wndHandle' }).resizable({
handles: 'se',
minWidth: 150,
minHeight: 100,
resize: function( event, ui ) {
refresh();
}
});
$('textarea').autoresize({
maxHeight: 80,
onResize: function () {
refresh();
}
});
refresh();
Here is a solution using jQuery to adjust the height
HTML - added ID
...
<div id="chatDiv" style="background:#fff;overflow: scroll;">
...
jQuery
$('.window').draggable({ handle: '.wndHandle' }).resizable({
handles: 'se',
minWidth: 150,
minHeight: 100,
resize: function( event, ui ) {
$('#chatDiv').height($('.window').height()-38);
}
});
$('#chatDiv').height($('.window').height()-38);
$('textarea').autoresize();
Fiddle
I have a horizontal tab menu. These tabs are all li elements. I show always 5 of them at once. To the left and right I have buttons which scrolls these tabs to either side. I am just not sure how to achieve that. Can I put the next 5 tabs in a different div which will be shown on click? That wouldnt be the best solution, would it? Can I do this somehow with JavaScript or jQuery?
Thanks.
You can do this w/ jQuery. Easier if all of the tabs are the same width. You can position the UL inside a DIV that has overflow: hidden and position: relative. Then the UL can slide around inside the DIV using the animate() method (or the css() method). Check them out on http://api.jquery.com.
Here's an example:
<!DOCTYPE HTML>
<html>
<head>
<style>
* { margin: 0; padding: 0; }
body { padding: 30px; }
div#tabs { width: 360px; height: 30px; overflow: hidden; position: relative; }
ul { display: block; float: left; width: 1080px; position: absolute; left: -360px; }
li { display: block; float: left; width: 70px; height: 30px; font-size: 12px; border: 1px solid #333; }
button { float: left; width: 100px; margin: 20px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
var tabs_list = $("div#tabs > ul");
if($(this).is("#left"))
{
tabs_list.animate({ left: "-=360" }, 500);
}
else if($(this).is("#right"))
{
tabs_list.animate({ left: "+=360" }, 500);
}
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
<li>eleven</li>
<li>twelve</li>
<li>thirteen</li>
<li>fourteen</li>
<li>fifteen</li>
</ul>
</div>
<button id="left">scroll left</button>
<button id="right">scroll right</button>
</body>
</html>
This would need some more work in order to de-activate or hide the scroll buttons when you've reached the beginning or end of the tabs list, but this should get you started.
I like Elliot's solution. I have another one, which will work if the tabs are of different lengths. It does it by hiding and showing the individual "li"s as you click the "right" and "left" buttons. The code also takes care of moving the tabs 5 at a time, both left and right, and handles the end cases.
<!DOCTYPE HTML>
<html>
<head>
<style>
#left, #right {float: left; position: relative; margin: 0; padding: 0;}
#tabs {float: left; position: relative; list-style: none; margin: 0; padding: 0;}
#tabs li {float: left; display: none; border: 2px solid #000; width: 50px; text-align: center;};
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var tabs = $('#tabs li'), number_of_tabs = tabs.length;
var tabs_visible = Math.min(5, number_of_tabs), low_tab = 0, high_tab = (tabs_visible - 1);
$(tabs).filter(function(index){return (index < tabs_visible);}).show();
$('#left, #right').each(function(){
$(this).click(function(){
if ($(this).is('#right')) {
var high_tab_new = Math.min((high_tab + tabs_visible), (number_of_tabs - 1));
var low_tab_new = high_tab_new - tabs_visible + 1;
$(tabs).filter(function(index){
return (index >= low_tab) && (index < low_tab_new);
}).hide();
$(tabs).filter(function(index){
return (index > high_tab) && (index <= high_tab_new);
}).show();
low_tab = low_tab_new;
high_tab = high_tab_new;
} else {
var low_tab_new = Math.max((low_tab - tabs_visible), 0);
var high_tab_new = low_tab_new + tabs_visible - 1;
$(tabs).filter(function(index){
return (index > high_tab_new) && (index <= high_tab);
}).hide();
$(tabs).filter(function(index){
return (index >= low_tab_new) && (index < low_tab);
}).show();
low_tab = low_tab_new;
high_tab = high_tab_new;
}
});
});
</script>
</head>
<div id="nav3">
<button id="left">left</button>
<ul id="tabs">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
</ul>
<button id="right">right</button>
</div>
</body>
</html>
Though I am not sure how would the tab look like, I am assuming that with the 5 tabs you are showing different set of page content.
I am suggesting a simple solution (Design) with Javascript. See if it works.
Have a variable to store the current View index. e.g. _currentView.
Place the content of 5 tabs in 5 views (When I say views there are many ways to establish it, ranging from using div object to using .net multiview control).
By default keep their visibility off.
Create a method, that'll accept the _currentView as the parameter. In this method, just make the current view visible.
On the click of left and right arrow, increment or decrement the _currentView value and call the method that activates the current view.
Please see if this helps you.