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') })
Related
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?
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'm kind of new here but I've regularly visited Stack Overflow to refer to stuff I've found myself wanting to ask (I tend to find 99.9% of what I'm asking has already been 'asked' on here heh)
but I wonder if this has.
I have a home page which has two div elements (styled as boxes with transition effects that reveal a styled a href link of their own).
basically these are links to tabbed content on the about us page.
first button has been assigned the id of learn-more-1 and the other learn-more-2. Observe below:
<a id="#learn-more-1" href="about-us.html#company-history"/>
<a id="learn-more-1" href="about-us.html#why-choose-us"/>
about-us.html has a tab container with two divs that are assigned the id's:
#company-history and #why-choose-us
and below these we have our content (a heading with the paragraphs containing respective info).
The issue I am having is, when ever we click either href link on the home page (styled as buttons btw..) we reach the about-us page no problem. Its that the tab container HOUSES the tab buttons but we don't see them. The tabbed content that's shown starts from the Heading.
I'm at wits end trying to understand what I'm missing.
My question is, Is there a way for me to use jQuery on the about-us page, i.e:
$document.ready(function() {
* psuedo code here *
if the user arrived here via clicking learn-more-1 button
make the tab button #company-history ACTIVE
and scroll up 50px ( so we can see the damn button as it only shows
us the heading and paragraph content of the tab container..)
else if the user arrived here having clicked learn-more-2 button,
make the tab button #why-choose-us ACTIVE
and scroll up 50px
};
Here's the thing, by default #our-company-history, On the about-us page is active. Meaning if you just visited about-us you will see that the tabbed container shows you the company history. So nothing is hidden.
Is there a way to perhaps, write a function that simply passes an argument to the about-us.html that will allow us to KNOW which a href ref button link was clicked so we can then work with it? Or am I over complicating something really simple here?
Would appreciate some direction here folks cheers!
EDIT:
Marat I HAVE to know if either a href link was clicked in the home page ! This way, and only this way do i show them the tabbed container and the content under the active tab. Make sense ? What you are proposing will fire automatically each time user clicks on the about-us.html page and show the tabbed container by default. NOT what we're gunning for my friend. So you see, I NEED a way to conditionally check IF the user arrived to the about-us.html page via either of those two a href links (from home page) and then open the respective tabbed content accordingly. BTW, currently when either a href link (styled as buttons) gets clicked in the home page, they DO arrive on the about-us page and onto the tabbed container but are unable to see the active and non active tab. This is all thats the issue.
Some code to show you algoritm
$(document).ready(function() {
var tabId = window.location.hash; // get id of destination tab
if(tabId) {
$("#our-company-history").hide(); // hide default tab
var tab = $(tabId); // get destination tab
$(window).scrollTop(tab.offset().top); // scroll to destination tab
tab.show(); // display tab-content
}
});
Is it possible to add a class active to a known tab in different page.
When i navigate to page 2 from page 1 i have to make tab 2 as active. I have the tab Id with me.
Can any one tell me what should I do?
My code
<div ng-repeat="t in data" class="time-tab-adspace" ng-class="{'tab-align-center':data.length==2}">
<a class="nav-people-tab text-hover" data-toggle="tab" ng-class="{'nav-people-tab-hover in':seltab=='ticket'+t.id}" ng-click="selecttab(t)"></a>
</div>
In the above code i get what is my selected tab and css like nav-people-tab-hover in gets applied when i click on it. Now when i click on continue below controller button gets executed.
$scope.seltab= tselected; // here I get the selected tab in page 2
$('#?????').addClass("active").show();
window.location.replace("page1");
In the above code What should I write in ????? or some piece of code inorder for me to work this?
I am a programmer in rails and I am trying to create a pop up when a link is hovered.
In my project I am looping through an array and displaying different users (eg user image, user name etc). I want a situation whereby when you put your cursor on the user name (which is a link) a pop-up window will show for only that user.
I searched some other sites and I got some javascript ideas which I placed below. But my problem with the code is that when I place the cursor on one user name (which is a link and has the link div) all the pop-up divs from every other user will show instead of just that user name link.
Please what can I do?
$('#link').hover(function(e) {
$('div#pop-up').show();
//.css('top', e.pageY + moveDown)
//.css('left', e.pageX + moveLeft)
//.appendTo('body');
}, function() {
$('div#pop-up').hide();
});
html
<%= for update in #updates%>
<div id="link-pop" style="display:none"><%=update.user_type%></div>
<div id="content">
<%= update.user_name%>
</div>
<%end%>
All the pop-up divs from every other user will show instead of just that user name link.
Well, this is because you're calling all popups $('div#pop-up').show();.
If you need to only show a popup relative to that link you can either select it by index() or if it's children of #link then something like $(this).find('#popup') will work.
What's your HTML? Probably you have couple of divs with the same id.
with the html like:
some text
<div style="display:hidden">user info</div>
the problem with your code is the id. An id, from what i know should be unique in page so it raises problems...
edit
You say you want a popup like in facebook right, so here goes some pseudo-code (as I'm not expert in ruby):
You should have and array of objects or some kind of data type containing your info.
When generating your html you should have something like this:
while(users)
print "user->name
<div class="hidden-user-info">
<img src="user->photo" alt="some description">
<span>user->name</span>
etc...
</div>
Again this is pseudo-code... The css should look like this:
.hiden-user-info{display:none;position:relative;z-index:20;}
The solution above should be used if you are presenting all user links when generating your html code.
If you're dynamically creating it, it may have to evolve some kind of ajax call or dom manipulation with jquery.
Without proper code or link it's hard to help more... Sorry