On one of my web pages, I have buttons at the top, say A, B and C.
Below it, I would like to display varying content in a common DIV. What is displayed is determined by which of the buttons is clicked. There is no order in which the buttons can or will be clicked.
Each of Contents A, B and C are php driven pages with menu options, forms, etc. The forms could be partly filled up after which User could navigate away from the page by clicking one of the above buttons and then clicking another button to come back to the form - I need to retain values of partially entered data.
Could someone share code (or point me in the right direction) where:
1) How do I ensure that Content A is displayed when page is initially loaded?
2) How do I define the page?
So far, I have defined a container DIV for the area where the content is to be displayed. And thereafter three DIVs where each of the three php pages are loaded.
My problem is that All 3 DIVs are displayed and I can scroll up and down to view them.
I can handle 2 DIVs but 3 DIVs challenge me.
Thank you in advance.
Uttam
Check out this awesome jquery plugin which will add some kind of parallax effect to your page.
fullpage.js
http://alvarotrigo.com/fullPage/#4thpage
The layout
<button class="toggleButton" data-target="div1">A</button>
<button class="toggleButton" data-target="div2">B</button>
<button class="toggleButton" data-target="div3">C</button>
<div id="div1" class="toggleDiv">
Content A
</div>
<div id="div2" class="toggleDiv" style="display:none">
Content B
</div>
<div id="div3" class="toggleDiv" style="display:none">
Content C
</div>
The JavaScript code:
$(function(){
$('.toggleButton').click(function(){
var target = $('#' + $(this).attr('data-target'));
$('.toggleDiv').not(target).hide();
target.show();
});
});
Related
I'm trying to make it so that one of the tabs on my portfolio website creates a drop down menu. I was able to make it so that when people click on the picture, it makes a dropdown menu. However, I also wanted the same thing to happen when they click on the text as well. So my problem is that I have two buttons with different classes that I want to have the same function. I thought I could do that with the javascript I have now, but it doesn't seem to work. Here's a link to a porotype I created https://iancoffman.com/digitalart2.html. The code should be viewable publicly.
What am I doing wrong?
What code are you using for your drop down menu that you want to show when clicking? You could use basic JavaScript to trigger the same function when you click each item.
A basic function example would be:
<script>
function myFunction() {
document.getElementById("menu").style.display = "block";
}
</script>
You could attach this function to a div that contains both the text and image like:
<div onclick="myFunction()">
<p>Text To Click.</p>
<img src="images/paint-symbol.png" alt="paintings">
</div>
<div id="menu" style="display:none;">Dropdown Menu</div>
Or you could add this function to each item if they are not connected:
<p onclick="myFunction()">Text To Click.</p>
<img src="images/paint-symbol.png" alt="paintings" onclick="myFunction()">
<div id="menu" style="display:none;">Dropdown Menu</div>
Not sure what exactly you are trying for but this might get you started with the concept.
Say I have 2 pages:
mysite.com/site1
mysite.com/site2
On site 1 I have a few buttons (all of them redirecting to site2)
On site 2 I have a few boxes with content (divs)
Is there a simple way to only show the divs I want to on site2 based on which button was clicked on site1? I remember something with the redirect?
For example, when I click button one, I end up on site2 with only box 2 and 3 visible, but if I'd've clicked button 2, I only see box 1 on site2.
This could possibly be a huge answer, but I will try to simplify it.
Basically, you want to use ajax- $.load here and with that you can just get content of other page.
Say you have below markup in site1
<button id="button1" class="btn" data-load="#div1">Load Div1 from Site 2</button>
<button id="button2" class="btn" data-load="#div2">Load Div1 from Site 2</button>
<div id="loadContent"></div>
Now what you can do is onclick of any button above fetch its data-load value and make a valid url and pass it through $.load. For Example.
$('.btn').on('click',function(){
var url="/site2"+$(this).data('load');
//url here will be www.mysite.com/site2#div1 or www.mysite.com/site2#div2 based on button clicked
$('#loadContent').load(url,function(){
//#div1 from site2 will be loaded within loadContent element
//callback function after content is loaded
})
//or just $("#loadContent").load(url);
});
You can have each button send a different query string to site 2 representing the allowed divs (e.g. mysite.com/site2?div1=true&div2=false)
Of course you will have to handle the query string on site2's javascript...
You can set id's for the elements in your 2nd page and then do the following:
First redirect to your page with the following Button:
<button onclick='window.location="page2.html#yourid"' >klick me</button>
Use the following Script in your page2.html:
var url=document.URL;
if(url.substr(url.indexOf("#"))=="#id1")
{
//delete Elements
}
else
{
if(url.substr(url.indexOf("#"))=="#id2")
{
//delete Elements
}
else
{
if(url.substr(url.indexOf("#"))=="#id3")
{
//delete Elements
}
}
}
replace the id's with the ids, you have chosen and delete the Elements in the if statements, which you want to delete:
document.getElementById("id#").remove();
The problem is it is a wp page and the button page looks like this (site 1):
<div class="col-sm-12" onclick="window.location.href='<?=get_permalink($child->ID)?>'">
<div class="r-targets-block-content">
<div class="r-targets-block-bg" style="background:url('<?=$thumbnail?>') center top no-repeat"></div>
<div class="r-targets-descr-block">
<div class="r-targets-title"><?=$child->post_title?></div>
<div class="r-targets-subtitle"></div>
<div class="r-targets-button-block">
<?=r_arrowed_button(
get_permalink($child->ID),
"SEE MORE",
["standard", "small", "border-yellow", "arrow-right"]
)?>
</div>
</div>
<div class="r-targets-recomendation-block-null"></div>
</div>
</div>
I'm implementing a simple jQuery script on a website that loads content from one section of a webpage into the 'display container' on the same webpage.
The content i'm loading is multiple div's which are all wrapped in an outer <div> which has been hidden from view.
I have the display container div and several links the use can click on. Each time they click a link, the appropriate matched content is loaded in to the display container.
My jQuery.
$(".Prod-Link-2").click(function(e){
e.preventDefault();
$("#ITARGET").empty();
$("#ITARGET").prepend('<img id="theImg" src="http://sensing-precision.com/wp-content/uploads/2015/12/page-loader.gif" />');
$("#ITARGET").load($(this).attr('href'));
});
Menu HTML
<div class="MPD">
<div class="Option">
<a class="Prod-Link-2" id ="DEF" href ="/electricalelectronic-products/alf150 #specTable" ><p>SPECIFICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #COMPARE" ><p>ALF150 v ALF150+</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #FEAT" ><p>APPLICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #ACCESSORY" ><p>ACCESSORIES</p></a>
</div>
</div>
The Target div
<div class="Info-Target" id="ITARGET">
</div>
So my problem is this all works except one of the links.
My hidden div has 4 content divs and 2 tables inside which all have their own IDs. SPECIFICATIONS grabs the #specTable, APPLICATIONS grabs the #FEAT div etc etc.. ACCESSORIES will not load the #ACCESSORY div at all and I don't know why. The script initializes and the page loader gif is displayed, but then instead of displaying the content I'm trying to load.. it displays nothing.
The hidden area format
<div style="display: none;">
<div id ="COMPARE"> some content </div>
<table id="specTable"> some content </div>
<div id ="ACCESSORY"> some content </div>
etc ....
</div>
For test purposes
<div id="ACCESSORY">
<p> This is the accessory div </p>
</div>
No matter what I change the name to in the ID tag and the links href attr, it will not load (I even tried making a new div with a different name and moving the div up to top of the hidden content area thinking it was maybe a loading issue), but if I change the links href attr to one of the tables or a different div such as #FEAT or #specTable.. it loads that fine.
My gut feeling is that there is some qwirk with jQuery and .load() that i'm unaware of.
This problem may be CSS related. I've just taken a look at a couple of products, and wherever the content includes lists, the display appears blank because of extremely excessive white-space.
This CSS rule seems to be the culprit:
.Features li:before { content: url(#)!important; }
I have a specific goal in mind.
Please reference this page: http://cubancomplex.kodingen.com/test/MM/dashboard1.html
On the very bottom right, there is a <div> with two buttons on each side. The <div> currently has one google chart contained inside.
The goal is for a user to be able to use those two buttons to switch between charts for approximately eight cities.
I am not familiar with javascript or jQuery so I would appreciate any assistance! How should I go about achieving this?
Here is the code for that section:
<div id="footer">
<div class="markerNavLeft" title="Prev" id="prevMarker">‹</div>
<div id="markers">
<div id="chart">
<div id="auckland_chart_div"></div>
</div>
</div>
<div class="markerNavRight" title="Next" id="nextMarker">›</div>
</div>
Based on my experience, there's 2 option that you can use..
you can place your charts in your div id="chart". The first one add a class to mark it as a selected one (e.g. selected), of course the other is hidden… Please add a same class for all of the chart(e.g. chart-detail). Then, you can use
var temp = $(".selected").next(".chart-detail"); $(".selected").removeClass("selected"); temp.addClass("selected");
for the previous button, you can use .previous function.
You can use ajax ( .ajax function or .load function). Mark each chart with an ID so, you know what's the next or previous chart (within php).
I have a page with two divs, one hidden and one displayed. When I click on a link at the bottom of the page, I want the hidden div to display and the displayed div to be hidden. It works fine, but if the browser height is small (e.g., on a mobile device) the user sees the div that gets displayed scrolled all the way to the bottom.
Here is the page:
<script type="text/javascript">
function display()
{
document.getElementById('div2').style.display="block";
document.getElementById('div1').style.display="none";
}
</script>
<!-- Start of content -->
<div id="div1" style="display:block">
<h2>This is shown at the beginning</h2>
<p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
<p>Hello</p><p>Hello</p><p>Hello</p>
<a rel="external" href="bogus.tar.gz" onclick="display(); return true">Click here</a>
</div>
<div id="div2" style="display:none">
<h2>This is shown later</h2>
<p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p>
<p>Goodbye</p><p>Goodbye</p><p>Goodbye</p>
</div>
If I put the link at the top of the page, the problem goes away, but the flow of the page demands that the link be at the bottom of the page.
So how can I get the browser to show the top of the div once it gets displayed.
window.scrollTo(x, y)
If you want to scroll the page to the top use
window.scrollTo(0, 0)
Otherwise, change the second parameter.
hide the div1 before displaying the div2.
If it does not run, use a scrollto javascript (based on displayed div) call to fix the issue
document.getElementById('div2').scrollTop=0