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).
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.
I just want to print 2 elements but when I do it does not look well. My alternative solution was two buttons per element but it is not good.
I used this library https://github.com/jasonday
Here is the preview
When im going to print/download here is the preview
Are there any ways to separate them?
Here is my print code. I got 2 elements.
$("#pdf, #pdf2").printThis();
Just add css style "break-after: page;" between the two section/table
<div> Section </div>
<div style="break-after:page;" ></div>
<div> Section </div>
Had a question. I'm trying to include a widget (which is contained in a div) for my landing page. Now, essentially what I am trying to do is when i hit the button is to fire the OverLayTwo BUT have it fall to the background, instead of the foreground. I tried the z-index method and it doesn't seem to help.
<div class="OverLay">
<div class="widgetContainer">
<li>This is a Div</li>
First Name: <input type="text" name="fname"></input>
</div>
<div class="OverLayTwo">
</div>
<button class="randomButton">Hello</button>
</div>
So essentially what I want is when User hits button, to have 'OverLayTwo' drop however have it fall to the BACKGROUND/backdrop behind the "widgetContainer" div. --
The reason is I want the user to be able to type into the input field(s), however, lately everything I have looked at or referenced is not solving the problem. Essentially just drops the overlay ontop/into the front of the widget - Not allowing the user to enter text into the appropriate input field.
Hope that made sense. The land of CSS is a true maze o.o ...Also, it should be noted I am using javascript and jQuery functionality.
Any tips and/or suggestions would be truly appreciated!
Thank you!
would be hard to make it fall in the background when it lives inside the first overlay.. try something like this..
<div class="OverLay" style="z-index:100">
<div class="widgetContainer">
<li>This is a Div</li>
First Name: <input type="text" name="fname"></input>
</div>
<button class="randomButton">Hello</button>
</div>
<div class="OverLayTwo" style="z-index:90">
</div>
I have a page with two divs in it, one inside the other like so:
<div id='one'>
<div id='two'></div>
</div>
I want div one to change class when it is clicked on, then change back when div two is selected.
I'm completely new to javascript, but I've managed to find a simple command that makes div one change when I click it.
<div id='one' class='a' onclick="this.className='b';">
<div id='two'></div>
</div>
Now I just need an equally simple way to change div one back when number two is clicked.
I've tried changing "this.className" to "one.classname," and for some reason that worked when I was working with images, but it doesn't work at all with divs
<div id='one' class='a' onclick="this.className='b';">
<div id='two' onclick="one.className='a';">
This does not work.
</div>
</div>
Essentially I'm wondering if there is a substitute for the javascript "this" that I can use to target other elements.
I've found several scripts that will perform the action I'm looking for, but I don't want to have to use a huge, long, complicated script if there is another simple one like the first I found.
You can use document.getElementById
<div id='two' onclick="document.getElementById('one').className='a'; return false;">
This does not work.
</div>
This would work:
document.getElementById('one').className = 'a';
you could get the element by id with:
document.getElementById("one")
Hii all,
am new to javascript and i don't know much about tabber class ,i would like to have a page where tabs are in two differnet line attached system property page where tabs are in two different line .
<div class="tabber">
<div class="tabbertab">
<h2>tab1</h2>
form stuff goes here...
</div>
<div class="tabbertab">
<h2>tab2</h2>
form stuff goes here
</div>
<div class="tabbertab ${tab_default}">
<h2>tab3</h2>
form stuff goes here
submit button here...
</div>
suppose these are two tabs which i would like to come into two different line...
You'll need to use code that support such feature, from quick look jQuery has several plugins:
http://plugins.jquery.com/plugin-tags/tabcontrol
For example this one have the "vertical" tabs you're after.
You just need to insert this as separator:
<li style="display: block;"></li>
And create an empty div for corresponding tab "content".