This is what I have:
I have a gridcontainer with three cells where one cell contains three buttons. Each button displays an image below the container.
My javascript code is supposed to make the image disappear if a button is pressed twice butdoes not do so atm. The only way to make it disappear is to either press another picture hence replacing it with a new pic or reload the page.
This is what I want to do:
Instead of replacing and hiding images, I want to replace and hide gridcontainers. So instead of buttons showing pictures they will show a couple of cells with a mix of text and images. The content and layout on this will change when a new button is change, and will totally disappear when the same button is pressed twice. Is this doable.
This is my current javascript:
function changeImage(element){
if(document.getElementById('imageReplace').src==element){
document.getElementById('imageReplace').src="";
} else{ document.getElementById('imageReplace').src=element; }
it is activated by this html:
<div class="cell"><h2>Top reasons you should have a digital self
defense</h2>
<button class="infobutt"
onclick="changeImage('survcap1.jpeg');">Intellectual
freedom</button>
<button class="infobutt"
onclick="changeImage('survcap2.jpeg');">protect vulnerable
groups</button>
<button class="infobutt"
onclick="changeImage('survcap3.jpeg');">Take control over your
life</button></div>"
and correponds further with this html (Situated outside and below the container, also below main tag):
<img src="" alt="Images" id="imageReplace"/>
What is wrong with my current code and how can I improve it to suit my purpose?
Related
I am set with a few different tasks. I need a pop up showing loading til the next page which needs the value that the current HTML img has in the onclick even. I have managed to display the loading image but it is on the parent page and not in a pop up, it will show loading then reset the parent page. There is an option to pick multiple values 1-3 but they are all going to the same onclick even in the HTML on the image
onclick="HRT.CODE(1)", onclick="HRT.CODE(2)" ect...
Not much to go on code wise
Currently I am have the following,
HTML
$("a").click(function() {
$(this).after("<img src='Images/loading-logo.gif' alt='loading'/>").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="RCLookup" name="RCLookup" alt="" src="images/search_icon_resize.png" onload="" onclick="fCW.fS(1);" />
So I tested the theory of the next page displaying with out a value and duplicating the behavior I am getting with the code I currently have and although it needs a value the next page will not even display and I am getting errors in the console. So leaves me to just put the loading img in a separate pop up while the next page is loading and still pass the value from the onclick even in the img HTML to the next page. Maybe an onclick="function(1)" passing to some JS to show the pop up image then call fCW.fS(val) from the function??
I have two modules which each contain a button code as follows:
First Button
<div onclick="parent.location='first-link'" data-mce-onclick=""><button class="button">First Button</button>
Second Button
<div onclick="parent.location='second-link'" data-mce-onclick=""><button class="button">Second Button</button>
When I show these buttons in the same template position on at the same time in the article, the First Button loses it’s functionality. What do I need to change in order to have them both be able to function properly within the same page?
try to use 1 module only for your links and
use css place your buttons
check this site for how to it uses 1 module for placing that links
http://soroushabtahi.com
I have some divs which are structured like this:
<div>
<div><a>more Info</a></div>
<div><a>more segments</a></div>
</div>
<div>
<div><a>more Info</a></div>
</div>
<div>
<div><a>more Info</a></div>
<div><a>more segments</a></div>
</div>
.......
These divs are being generated dynamically. Some divs contain 2 hyperlinks (like the 1st div), some contain only one hyperlink (like the 2nd div).
When I click on moreInfo link, it has to display one div which contains some information. When I click on another link, the previously displayed div should be hidden and open appropriate div associated with that link.
When I click on moresegments link, it has to display number of segments and all moreInfo links should be disabled. Each segment consists of moreInfo link(segment consists the code just like 2nd div). After click on moreInfo link in each segment. It has to behave like in point1.This is my sample code http://jsfiddle.net/H5R53/16/In the above code, when I click on moreInfo link it displays one div which contains some information .Upto this it's working fine. Now my problem is, when I click on the same link again it doesn't show the Information again. And also when I click on moresegments link the moreInfo links( which are not child of moresegments link) should be disable and all opened div's( which are opened when click on moreInfo link) should be close. Anyone please help me.
If I understand your issue correctly, you want to hide the div #moreInfo if the user wants to open another one.
If so,
JQUERY
if ($('#moreInfo').size()==1) {
$('#moreInfo').remove();
}
YOUR JQUERY WITH THAT CONTROL ADDED
$('.moreInfLink').live('click',function(){
if ($('#moreInfo').size()==1) {
$('#moreInfo').remove();
}
$(this).after("<div id='moreInfo'>sdasdad<br/>sdasdad<br/>sdasdad<br/><div id='close'>close</div></div>");
});
And your Fiddle Updated!
I am currently building a basic website. So far so good, however it's getting rather cluttered. One reason is that I have a seperate header for each page because I have no script to change buttons when hovering or when the page a button linked to is the current page.
I have these button states:
????_selected_idle (active if the button links to the active page)
????_selected_hover (active if the button links to the current page AND the user hovers)
????_default_idle (normally active)
????_default_hover (normally active + hover)
???? can be 'home','about','register','products','contact'
so in total there is 20 images.
Here is what I use now (this is on the ABOUT page):
<td width="173px" Height="103px">
<a href="/index.php">
<img src="/Images/home_default_idle.jpg" onmouseover="this.src='/Images/home_default_hover.jpg'" onmouseout="this.src='/Images/home_default_idle.jpg'" width="100%" height="100%" border="0" alt="Home selected">
</a>
And here is the same code but on the HOME page.
<td width="173px" Height="103px">
<a href="/index.php">
<img src="/Images/home_selected_idle.jpg" onmouseover="this.src='/Images/home_selected_hover.jpg'" onmouseout="this.src='/Images/home_selected_idle.jpg'" width="100%" height="100%" border="0" alt="Home selected">
</a>
Any help is much appreciated! If you wish to look at the website here is the link.
If you visit the page don't pay to much attention to the content yet, it's still a WIP.
EDIT:
Right now I have FIVE essential pages.
Home
About
Contact
Register
Products
all of these pages have their own headers. THese headers are in seperate files. My goal is to make a single header that applies to all pages.
However, there is a reason I have all these several header files. I have them seperate because the buttons change state depending on which page you are on.
Say you are at the HOME page, the HOME button than is this picture:
- home_selected_idle
If you'd hover over that button it would have to change to:
- home_selected_hover
If you were on the ABOUT page and you'd look at the HOME button it would have to be:
- home_default_idle
If you were to hover over that button it would change to:
- home_default_hover.
Basically my iamge structure is like this:
- pagename_state_mousestate
pagename
home
about
products
register
contact
state
default
selected
mousestate
idle
hover
Ok I will give you a small example in php:
For header link, you are going to want to use CSS rather than an image.
You will want to dynamically change the class of each element like this:
<div class="<? if($_SERVER['PHP_SELF']=="home.php"){echo "selected";}else{echo "ghosted";} ?>" > HOME </div>
You will just copy paste that format for each one. No need for a JQuery lib it's too simple for that. Just rework your images to be CSS, thats standard anyway, images take to long to load for mouseover events and CSS is more flexible.
I would recommened you to use jQuery.
It's can save you lot of time.
for example, this source code change all the images in the screen when the user hover them.
See how much it is simple with jQuery.
$('hover',function () { //This function will run every time user over
an image this.src=this.src.replace('idle','hover') }, function () {
//This function will run every time user leave (mouseout) an image.
this.src=this.src.replace('hover','idle') })
can I cache an empty form template as a second page in browser cache
so that when you click "create event" button on first page it immediately
opens empty form template without having a need to download the template
from the server as it's cached.
Just like CREATE EVENT button in Google calendar; which let's you to switch between calendar and new event form template.
Well, you can either use Javascript for building the new page from scratch when the respective action is invoked (probably quite tedious) or you can use an invisible section (e.g., a separate <div>) of the HTML page (style = display: none) and make it visible by changing its class to a visible style and making the original page invisible (change its style to display: none).
One way to accomplish this would be to load your second view into a hidden container. You can hide it with a simple CSS display property toggle, like this:
<div id="mySecondView" style="display: none;">
<!-- content of second view here -->
</div>
And on button click you can do this to unhide it:
With jQuery:
$('#mySecondView').show();
or
$('#mySecondView').fadeIn();
Without jQuery:
document.getElementById('mySecondView').style.display = '';
Of course you'll have to position the second view via CSS as you want it, otherwise it'll just pop up in some weird place that won't make sense.