Hide/show divs for different page layouts JS issues - javascript

I have a WP page with a main div area and 2 buttons above it.
I have some JS which is meant to:
On page load, show a list type view of posts in the main div
When you press the 'gallery view' button, swap that main div content to the gallery view and hide the list view
when you press the list view button, swap the main div content back to the list view and hide the gallery view
Further pressing them continues to swap the div content
The JS I have nearly works. On page load it shows the list content. However on the first press of the gallery button, it doesn't hide the list view. But if you then press the list view button again, it works and the gallery view does get hidden and then further presses of buttons, it continues to work as it should.
It's just that first div switch where it doesn't hide the div that's the issue.
Here's the relevant JS, CSS and HTML:
JS:
<script>
var _targetdiv = null;
function showdiv(id) {
if(_targetdiv)
_targetdiv.style.display = 'none';
_targetdiv = document.getElementById(id);
_targetdiv.style.display = 'block';
}
</script>
CSS:
.hidden {
display: none;
}
HTML:
<div id="project-view-controls">
<a onclick="showdiv('project-image-archive');" id="project-gallery-btn" class="project-hide-btn">Link</a>
<a onclick="showdiv('project-list-archive');" id="project-list-btn" class="project-hide-btn">Link</a>
</div><!-- #project-view-controls -->
<div id="project-image-archive" class="hidden">
<p>Image view view here</p>
</div><!--#project-image-archive-->
<div id="project-list-archive">
<p>list view here</p>
</div><!--#project-list-archive-->
I'm not sure why it's just not working on the first instance of the button being pressed but it works after that.
Any help would be greatly appreciated!

The first thing I want to answer, is your question, why it is not working on the first button click. Its pretty simple, so lets have a look at your JS.
var _targetdiv = null;
function showdiv(id) {
if(_targetdiv)
_targetdiv.style.display = 'none';
_targetdiv = document.getElementById(id);
_targetdiv.style.display = 'block';
}
First you set the _targetdiv to NULL. The first time you click on a button and your function showdiv is called. The first time you call this function your if-statement is false, cause _targetdiv is null, so your code jumps to the next line _targetdiv = document.getElementById(id); and execute it, so _targetdiv is now set and will be displayed. So the second time you call this function _targetdiv is still set, so it can be hidden trough your code, cause your if-statement is true.
I would change your Javascript to something like this:
function showdiv(obj){
// First set both elements invisible, so nothing is displayed
document.getElementById('project-image-archive').style.display = 'none';
document.getElementById('project-list-archive').style.display = 'none';
// Now show only the div that is requested
document.getElementById(obj).style.display = 'block';
}
What the Javascript now does is, it hides both elements, so that nothing is displayed and directly after that it takes the id from the given object and displays it.
I hope this helps you a bit.

Related

Showing a div when an image in a slider is active

I am working with a plugin image slider and am attempting to show specific text that will be associated with image. For instance, image 1 will show paragraph 1, image 2 will show paragraph 2, etc.
I was going to upload a snippet showing what I am doing, but the plugin code was too much. Therefore, here is a jsfiddle link that shows what I am doing. The main code in question is at the bottom of the javascript and the text that I want to show is at the bottom of the html. This code:
$(document).ready(function() {
$('.ma5slider').ma5slider();
var court = $('#slide-1');
var activeSlide = $('.slide--active') == true;
if(court == activeSlide) {
court.show();
console.log('It is working');
}
});
I have the text set at display: none; on page load and then when the specific image is displaying (I believe I narrowed this down to the class .slide--active), that text set to show().
Does anyone see what I am doing wrong?
This is because you are not targeting the right active class when each slide takes turn to slide in, I have amended your code below:
$(document).ready(function() {
$('.ma5slider').ma5slider();
var court = $('.slide');
var activeSlideClassName = 'slide--active';
setInterval(function(){
if(court.hasClass(activeSlideClassName)){
console.log('It is working');
}
}, 1000);
});
Also your slide will need to have a callback function to capture the event whenever the new slide comes in. In this case I have used setInterval() to monitor the DOM, it isn't the best solution but you get the idea....
Working code here
you can check it $('.ma5slider').on('ma5.activeSlide') same as below :
jsfiddle

how to detect scrollbar on application?

I have an SAPUI5 app where I display a table which goes off the screen. I have a button that I the user can click to go back to the top. The problem is that button is always displayed, even when not needed. I only want it to show up when the table goes off the screen. I've been looking for solution to this but nothing has worked so far.
Here is my button defined in my xml view
<html: a id="toTop" href ="#_xmlview0--top">
<Button id="backToTopBtn" text = "back"/>
</html:a>
and then I have this defined at the top of my view
<html:div id = top"></html:div>
I've tried different solutions I found using jquery but nothing has worked so far. I thought something like this would work
if($('body').height()>$(window).height()){
//go back to top here
}
but looking at these values body height and window height are the same. Any ideas?
To not have your button show all the time you need to hide it using styles or javascript. I'll assume you'll use display: none in this case then show it when the user has scrolled a certain amount.
element.scrollTop and element.scrollLeft give you the amount of offset an element has.
If you want to show something only when the body has been scrolled a certain amount you could do:
var page = document.body;
var button = document.getElementById('backToTopBtn');
function showScrollTopButton() {
if (page.scrollTop > xyz) {
button.style.display = 'block';
} else {
button.style.display = 'none';
}
return;
}
window.addEventListener('scroll', showScrollTopButton);
Where xyz is the numerical value for when to show and hide the button.

Stuck: hide/show divs with next button, redirect last div

Here's what I have so far, which allows the user to click an image to open a new window and go to a location. When that click occurs, the image in the parent window is replaced with the next div.
Example: http://jsfiddle.net/rzTHw/
Here's the working code so far...
<div class = "box"><img src="http://placehold.it/300x150/cf5/&text=img+1"></div>
<div class = "box"><img src="http://placehold.it/300x150/f0f/&text=img+1"></div>
<div class = "box"><img src="http://placehold.it/300x150/fb1/&text=img+1"></div>
<div class = "box"><img src="http://placehold.it/300x150/444/&text=img+1"></div>​
Jquery:
$('.box').not(':first').hide();
$('.box a').click(
function(e){
e.preventDefault();
var newWin = window.open(this.href,'newWindow'),
that = $(this).closest('.box'),
duration = 1200;
if (that.next('.box').length){
that.fadeOut(duration,
function(){
that.next('.box').fadeIn(duration);
});
}
});
What I am having trouble with is:
Creating a "next" button so the user can cycle through to the next div without having the click the image, thus avoiding having to open a new window to get to the next image.
Having a click on the last div redirect the window location to a URL, while still doing the normal function of opening a new window to the a href location if the image is clicked. Otherwise if clicking the "next" button when the last div is shown, simply redirect the user.
What's the best way to go about this? Thanks!
Here is my attempt at tweaking your code to allow for a next button, and my best guess at what you want to happen for the last image:
var redirectUrl = 'http://www.google.com'; // replace in your code
function next(event, duration) {
duration = duration || 1200; // default value
var that = $('.box:visible');
if (that.next('.box').length) {
that.fadeOut(duration, function() {
that.next('.box').fadeIn(duration);
});
} else {
window.location.href = redirectUrl;
// the above line doesn't work inside jsFiddle, but should on your page
}
return false;
}
$('.box').not(':first').hide();
$('.box a').click(
function(e) {
e.preventDefault();
var newWin = window.open(this.href, 'newWindow'),
duration = 1200;
next(e, duration);
});
$('.next').click(next);
jsFiddle example here. Note the redirect is prevented in some browsers since it is running inside an iframe. But it should work in a normal page.
Perhaps look at a slideshow jquery plugin. JQuery Cycle being just one example. There are plenty. Just google jquery Slideshow or jquery cycle and pick the one that suites you best. The cycle plugin itself has a number of "pager" examples that let you change the contents of the displayed picture without leaving the page.
Most of them offer having the contents be html and not just a simple picture so you can play around with what exactly you want.
There's also Fancybox, lightbox, colorbox, etc. if that's what you're trying to accomplish.

jQuery - Changing Styles and Displaying Certain Elements

Well it seems I know enough Javascript to hurt myself so I come asking help from you guys here. Here is what I am attempting to do and my issue.
I have two forms and only one will be filled out depending on the users choice. They will click one button or the other. When they click the button the form fades in and the button changes classes (goes from a light button to a dark button) Here is were I am running into issues. First I cannot get the form to fade in at all and the buttons will only change classes if I click them twice not once.
One other thing I am not sure how to go about is if I have say form 1 chosen but I meant to click form 2 then I want form one to fade out, form 2 to fade in and the buttons change accordingly. Here is my Code:
JS
<script type="text/javascript">
var $j = jQuery.noConflict();
var $jtest1 = $j('#test1');
var $jtest2 = $j('#test2');
$j("#button1").live('click',function(){
//Fade out form if shown and fade in form selected
$jtest2.fadeOut("slow", function(){
$jtest1.fadeIn("slow");
});
$j('#button1').live('click', function(){
//change class from light to dark
$j(this).addClass('dark_button').removeClass('light_button');
}); //I need to change this class to light if
// button 2 is selected and change button 2 to dark
});
</script>
HTML
<p class="light_button" id="button1">Test 1 </p>
<p class="light_button" id="button2">Test 2 </p>
<div class="hide" id="test1"><p>TEST</p></div>
<div class="hide" id="test2"><p>TEST 2</p></div>
Note: class="hide" is style="display:none"
Thanks for any help because I am a but stuck and not sure to go about this. Also please give me an example because I do not always follow when someone say change this to that etc.
Look at the code below, added comments on why
$j("#button1").live('click',function(){
//Fade out form if shown and fade in form selected
$jtest2.fadeOut("slow", function(){
$jtest1.fadeIn("slow");
});
//The following is inside the click so I do not get added until the first click
//and added after every click so I multiply!
//Hence why it takes 2 clicks
$j('#button1').live('click', function(){
//change class from light to dark
$j(this).addClass('dark_button').removeClass('light_button');
}); //I need to change this class to light if
// button 2 is selected and change button 2 to dark
});
You should be doing something like this
$j("#button1, #button2").live('click',
function(){
//figure out what button was clicked.
if(this.id === "button1"){
var btnA = $j(this);
var btnB = $j("#button2");
var divA = $j('#test1');
var divB = $j('#test2');
}
else{
btnA = $j(this);
btnB = $j("#button1");
divA = $j('#test2');
divB = $j('#test1');
}
//make sure it is not already active, no use to show/hide when it is already set
if(btnA.hasClass('dark_button')){
return;
}
//see if div is visible, if so hide, than show first div
if(divB.is(":visible")){
divB.fadeOut("slow", function(){
divA.fadeIn("slow");
});
}
else{//if already hidden, just show the first div
divA.fadeIn("slow");
}
//Add and remove classes to the buttons to switch state
btnA.addClass('dark_button').removeClass('light_button');
btnB.removeClass('dark_button').addClass('light_button');
}
);
jsfiddle example

show and hide divs with radio buttons inside the hidden div

Basically I have three images (call them img1, img2, img3) with three menus associated with each. (menu1, menu2, menu3)
When a user clicks img1, menu1 should pop up with three radio button selections (rad1, rad2, rad3). Say the user clicks rad2, menu1 should then hide and img2 should appear (but rad2 should still be selected). When img2 is clicked, menu2 then should show up with rad2 selected. Then if rad3 is clicked, menu2 hides and img3 shows up (but rad3 is still selected). And so on and so forth.
How to code this in javascript?
Here is an example of how to show a hidden div by clicking on an image.
<script language="javascript">
function showDiv() {
mydiv = document.getElementById('div1');
mydiv.style.display = 'block';
}
</script>
<div id='div1' style="display:none;">
<!-- content -->
</div>
<img src='img.gif' onclick='showDiv();'/>
It should be as easy as:
function img1clk() {
menu1div.style.display = "block";
}
function menu1radclk() {
menu1div.style.display = "none";
img1div.style.display = "block";
menu2div.style.display = "block";
}
and so on. You will have to initialize the elements so their onClick property is pointing to the correct function, but thats simply
img1div.onclick = ing1clk();
or in html
<div onclick="img1clk()"><img src="..."></div>
Hope this helps ya!
This becomes pretty easy if you use jQuery's built-in methods, such as show() or hide(). Don't re-invent the wheel and all that :)
If all 3 menus are essentially the same but just look different why not bring up the same menu every time but change its css class?
Also, I couldn't agree more that jQuery is the way to go. The jQuery site's own documentation I find a bit lame, but once you've got around the basics it's really intuitive.

Categories

Resources