As the title states I'm having a bit of trouble with an element on my 'work in progress' website.
I currently have an unordered list which provides square sections (with a different image and link in each) On a hover, the image changes opacity and the background color changes also.
The problem I'm facing is that while the cosmetic effects are all working fine, the link is not working on click. (However, the link does display in the bottom of my browser as 'followable' and right clicking allows for following the link through the options there.
The link for the element is http://www.techcom.co.nz/#myclients
and currently the only element with an attached link is the img for steam. (Column 2, Row 2)
Any help anyone can offer would be greatly appreciated.
Regards
Add the following code to your images...use javascript
example
<img src="" alt="" onclick='window.location="URL HERE"'>
please remember not to get the quote marks mixed because it will not work otherwise and looking at your source you have no URL the images should be going to apart from #
I don't understand exactly what's the problem.
The links on "my work" section are not working because the links to "#" (none) try to give them real url.
Related
Here's the website I'm working on: http://104.193.173.104/modx/
The top navigation has 2nd and 3rd levels that are generated by Wayfinder in ModX. As far as I can tell from the page source and chrome inspector, they are generating properly and have the appropriate CSS classes. When I click one of the nav links, the inspector shows the li class change to "dropdown open" and a ul class "dropdown-menu" appears. I can see the outline in inspector, but nothing is showing on the page.
I'm guessing this is a z-index problem in my CSS, but I'm not very familiar with how all of that works. Is anyone able to help me? Let me know what HTML/CSS you need me to include and I'll edit this post. Cheers!
note: My jQuery is called in the head of each page
Your navigation div (#main-navigation-container) has overflow:hidden. You'll need to figure out what you want to do there but that's why it's being "cropped" out.
during page transition am using gif image to represent as 'loader' .But first 2 or 3 navigation i can see the image and rest of the transition instead of image am only able to see the "alt" text i have give with blank imagebox.
I think the image is not loading,please check my code
<div id="loadinggif" class="overlay" align="center" style="display:none;">
<img src="img/gif.gif" alt="loader" height="50" width="50">
</div>
and when i click one page navigation am using following code
$('#loadinggif').css('display','block');
Please check my screen shots first one is working perfectly ,second screnshots showing the exact problem am facing now.
Are your 'pages' in the same file/location? Make sure the relative path to your image is correct everywhere you use it.
Another thing would be to clear your browser cache.
If you still cannot get it to work, I would suggest inspecting it when it doesn't load, and looking at the browser's console. Depends on the browser, but most you can right click the image then 'inspect element', or something very similar.
Try to fully qualify the image. Such as https://mywebsite.com/img/spinner.gif. Now, if that fails, do not give up on life, there is still hope! What I normally do, is have a div with a css/Less class that has the image in it. That way, the image is loading through the dom, and to hide n show, simply hide n show the dom element with that specific class.
Let me know if that works.
Cheers M8.
By the look of the posts here I'm in the deep end with the big boys whereas I need the toddlers paddling pool. So apologies if I'm in the wrong place with my basic problem.
I can't get images to float with LightBox [v. 2.6]
I have a sample problem page here - http://quivis.co.uk/PROBLEMS/lightbox-float/index.html
That page has 2 copies of the same image. Both 'work' in the sense that when you click them LightBox does its brilliant thing and fires up correctly, but both image links display incorrectly.
The top image looks as it should i.e. with mouse-over highlights/border colours etc but will not float right. In some browsers there is also a large redundant area to the left that I am unable to remove.
The bottom image floats as I want it to but in the process the image link styling is lost.
As all things are possible it must be possible to combine the look of 1 with the positioning of 2 but I can't see how to do it!
All the related files are within the 'PROBLEMS' folder. Please let me know if I should paste the html or css here.
Any help much appreciated. Thanks, Duncan
Set float:right style to a tag instead of float:right to images.
And there is mis-spelling of class attribute in second a tag, it is mentioned as 'xclass', correct that spelling too.
I'm completely stumped on this one - I have a pretty basic document with an ordered list containing anchors and hidden divs that show when a link is clicked. The problem is when one link is clicked all links change colour as per the a:visited css rule. This does not happen in IE10 (only the visited link changes colour as expected) but it does happen in Opera, Chrome and Firefox.
Here's the markup: http://jsbin.com/usUwecE/3/edit - I'm pretty new to web design so it could be something really obvious, but any help would be appreciated. Cheers!
That's because they all point to the same URL, so when you click on one they all return that they've been visited.
remove hash
instead of #javascript:; use javascript:; in your code
As everydayghost said all the href attributes target to #javascript:; which is the same page in address. In order to change this you have to make every href unique ie. href="#div1", href="#div2" ...
I am not a HTML/CSS expert but I am in charge of developing and maintaining a website for my employer.
I have set of link in the middle of my webpage that I want to have a specific CSS applied to without affecting any of the other links, and really the only change I want to make is to move the title popup to the right. Basically, the pointing hand hover mouse icon blocks the text in the title, so I want to move the popup to the right of the pointer, so that it can be read completely during a hover.
I've seen a few different ways to manipulate the title popup but they are either way too complex for what I need, way too simple in that they affect all <a> tags on the page, or do not explain how to do what I want which is just move the popup to the right a little bit.
You can manually style any element of the page by using 'inline styling' which will not effect any of the other elements on the page.
You do this in the HTML rather than the Style sheet, for example say your style sheet has:
.tinybutton {margin:0;padding;0:}
Which would use the element in HTML as:
<a class="tinybutton" href="#"> </a>
Now let's pretend you want to move the button slightly right without editing the CSS you then use the inline styling like so:
<a class="tinybutton" style="margin-left:10px" href="#"> </a>
So in other words just add style=" " with the styling options you require to the element that you want to edit without effecting the CSS.
Now that you have answered your own question, I know that the titles you are trying to move are tool-tips generated by the browser.
Not only can those not be moved, these tooltips are browser dependent and looks different on each browser. I have no idea which one you are using but it is not Chrome because we made sure that the tooltip does not overlap the mouse cursor.
The other possibility, like the jQuery plugin you mentioned, is to write Javascript that renders each title in its own invisible HTML element. Then it makes those tooltips appear on by adding an a :hover style or mouse-event-handler.
Having done further research on this, I found several questions in StackExchange that indicate that a title cannot be modified. So given this:
<a title='stuff here' href='#'>Click me!</a>
it is not possible to manipulate the "stuff here" section using jscript, css, etc. The only option is to use a jQuery plugin or something along those lines, and that has proven to be beyond my ability to troubleshoot.
For the time being, I simply added spaces to the front of the title to push the text out, like this:
<a title=' stuff here' href='#'>Click me!</a>