So there's an issue.
If you view this .htm page you see that image.
http://icpy.webs.com/text/Mass.htm
The problem is originally there was a bullet decorator which was the list-style. The lightbox image was working. When I applied the List-style-type: none, my image wasn't working when I clicked on it. Did I do something wrong?
Your html is all messed up.
<div id="cas> <ul> <li><a class=" title="Mass Sale layouts" href="#inlineframe" fancybox"="">
<img src="http://dgamerhelp.webs.com/soccer/layouts/BEA01.png">
<div id="inlineframe" style="width:1040px;height:785px;display: none;">
</div>
Close the id tag of div like : div id="cas"
Close the <li> tag
Close the <ul> tag
Close the main div correctly.
If you are not using a class for <a> tag, then remove it completely ( <a class=" )
Fixing the above things should solve your issue. Im surprised, it actually worked first time..
Cleaned up code should look something like this :
<div id="cas">
<ul>
<li>
<a class="" title="Mass Sale layouts" href="#inlineframe" fancybox"=">
<img src="http://dgamerhelp.webs.com/soccer/layouts/BEA01.png">
<div id="inlineframe" style="width:1040px;height:785px;display: none;">Whatever that needs to go here.
</div>
</a>
</li>
</ul>
</div>
Yes, you have javascript errors on that page, which will prevent it from working.
"NetworkError: 404 Not Found - http://icpy.webs.com/text/.http://icpy.webs.com/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"
Related
There is a slider at the top of the page.
Each slide has a layer of list and anchor tags with image tag inside.
https://www.rakuten.ne.jp/gold/yanosp-fineplay/
Here is the HTML code for the slider part.
<div class="slider">
<ul class="bxslider">
<li>
<img alt="ランデイズパック リュック" src="sliderimg/rundaysslider.jpg" />
</li>
<li>
<img alt="" src="sliderimg/porchn.jpg" />
</li>
<li>
<img alt="" src="sliderimg/slider13.jpg" />
</li>
</ul>
</div>
As you can see, each anochor tag has target="_blank" and it's supposed to open a new tab for a new page. However, clicking won't open the link, let alone a new tab. I was wondering if this has something to do with z-index or something, but what's weird is that, if you go ahead and hover each image in slider, the link still appears. I just can't figure out why this is happening, and any helps would be greatly appreciated.
Thank you so much.
PS - I do not think this has something to do with bxslider plugin, so please refrain from just commenting something like "Try other slider js"
I think this is how the bxslider.js plugin works,
When you click, the action is working on the bxslider.js plugin slidering instead of clicking the link.
but when you alread slider to other picture, the clicking anchor action is working. try it!
sorry for poor english.
I'm relatively new to HTML so maybe there's been a really blatant solution I've been missing. But I'm making a single-scroll website (with bootstrap) with a very basic navbar for people to jump to the section they want.
The navbar is currently an ul with a background image that appears from the right on hover.
I've followed various tutorials; created the anchor points and id tags, yet nothing seems to happen when I click on the navbar buttons. And I feel like I'm missing a fairly obvious solution here. I've shifted the position of the anchors around, and tried a few variants in both html and css I found online but none seemed to have solved it for me. I've tried it on other browsers, so it isn't a browser issue.
Here's the navbar code:
<div class="container-fluid menuholder">
<div class="menu">
<ul class="nobull menutext">
<li>Prologue<br><font weight="bold" color="white"><strong>The Beginning</strong></font></li>
<li><br>Chapter 1<br><font color="white"><strong>The Storyteller</strong></font></li>
<li><br>Chapter 2<br><font color="white"><strong>The Big Idea</strong></font></li>
<li><br>Epilogue<br><font color="white"><strong>It Begins</strong></font></li>
</ul>
</div>
</div>
and here's a relevant part of one of the sections it's supposed to automatically scroll to:
<div class = "container">
<div class="row">
<div class ="chap1title col-md-3" id="chap1">
<h3>Chapter 1:</h3><br><h2>The Storyteller</h2>
</div>
</div>
</div>
Aaaand here's some images of the menu and an example of where I'd like the Chapter 1 button to scroll to
Frontpage
Navbar
Where I'd like it to scroll to
Thank you so much in advance!
It seems like, your link is not valid, you are adding menutext inside the href which should actually take the link or the id of the anchor element
<ul class="nobull menutext">
<li>Prologue<br><font weight="bold" color="white"><strong>The Beginning</strong></font></li>
<li><br>Chapter 1<br><font color="white"><strong>The Storyteller</strong></font></li>
<li><br>Chapter 2<br><font color="white"><strong>The Big Idea</strong></font></li>
<li><br>Epilogue<br><font color="white"><strong>It Begins</strong></font></li>
</ul>
It seems like menu text is a class name, which should be added in the class
I have an index.html that includes:
<li>
<a href="imprint.html#imprint-link">
<div class="main-menu-title">IMPRINT</div>
</a>
</li>
When I click on this item another html file (imprint.html) is loaded, but when I click on Home, which includes the following code to go back to index.html, it doesn't work!
<a href="#index-link">
<div class="main-menu-title">HOME</div>
</a>
What is wrong here?
Update 1: When hovering the mouse over the link I get:
try using this code :
<a href="index.html">
<div class="main-menu-title">HOME</div>
</a>
inplace of :
<a href="#index-link">
<div class="main-menu-title">HOME</div>
</a>
To answer your original question.
What's wrong here?
As a couple kind folks already commented and one person already provided a nice solution, clicking on your original link
href="#index-link"
while you are on the imprint.html page will not take you to your index.html page. Why? Because
<a href="#index-link">
<div class="main-menu-title">HOME</div>
</a>
is saying, "Take me to an element on the current page (imprint.html) that has an ID of 'index-link'. If there is no element with and ID set to index-link, on the imprint.html page, nothing will happen. And, you will stay on the current page because you didn't specify an URL outside of the current page, which is still imprint.html.
So, with that current setup, you will not get to see index.html.
I built a simple site as part of teaching myself HTML, CSS and JQuery. You can see it here: http://davideyre.co.uk
It was working fine for a while, but now in the 'contact' div several of the images have disappeared. The blue email image remains and the mouseover works to switch to the black email image, but the Twitter, LinkedIn and Google images are not displaying at all.
When I looked at them using the Inspect Element plugin on Firefox, it appears that an img class is being applied to these three icons. This code shows the first list item (the email icon) and the second list item (the Twitter icon) with the img class applied to it.
<div id="contact">
<ul>
<li class="menuimage">
<a target="_blank" href="mailto:david#davideyre.co.uk">
<img width="60" height="60" src="http://davideyre.co.uk/images/email_blue.png" data-other-src="http://davideyre.co.uk/images/emailblack.png">
</a>
</li>
<li class="menuimage">
<a target="_blank" href="http://twitter.com/davideyre">
<img class="qzsombkdzpaqphznltst" width="60" height="60" src="http://davideyre.co.uk/images/twitter_blue.png" data-other-src="http://davideyre.co.uk/images/twitterblack.png">
</a>
</li>
I have no idea how this img class is being applied to the images.
Many thanks to MarkB, IAteYourKitten and Bondye. It was the Adblocker in Firefox. :)
I wonder why you are using the class menuimage. You don't use it in your CSS.
I would try adding some styling to the menuimage class in CSS to see if you can affect the styling of the list tag. Or remove the menuimage class from the list tag and add it to the image tag item, and try to add styling.
Problem is that the focus does'nt seem to shift to the footer links when access key 0 is pressed in chrome.Works okay for IE and firefox.Here's what am doing,
<ul class="hidden">
<li>Footer</li>
</ul>
<div id="FooterDiv">
<a id="Footer" name="Footer" href="javascript:;" class="hidden">Footer</a>
//More footer links here.
</div>
I don't have Chrome available right now, but try alt+shift+Key. Think they implemented it like Firefox did.