I have a HTML file with many <div> elements and I cannot navigate to anchor tags using JavaScript. I have put a demo in jsfiddle. Please see the link for JavaScript + CSS + HTML for details.
I can navigate to the "section5" but not to other sections.
jsfiddle demo
Can anyone help me with this?
Any help would be really appreciated....
Kind regards
Update : Thanks for the response. I have updated the link with cleaned up HTML. The javascript navigation still doesn't work :(
Update 2: Thanks for the suggestions, but still not working
I updated it with your suggestions.. but it doesn't work. If I take out the css entry "div.columnbreak { -webkit-column-break-after: always; the navigation works. When I put that back the navigation doesn't work*
You are not closed the tags correctly
For eg:,
Wrong
<p>This EPUB eBook is released under a Creative Commons (BY-NC-ND/3.0) Licence.
<p>Source text and images taken from the Public Domain.</p>
Correct
<p>This EPUB eBook is released under a Creative Commons (BY-NC-ND/3.0) Licence.
Source text and images taken from the Public Domain.</p>
Take a look: jsfiddle
You don't need to use <a> element at all, you can assign unique id to your section block.
I might be reading this wrong but it looks like your tags might not be closed properly
in section you have 2 open p's and only 1 close.
its throwing off wihch sections are in which and thats why your anchors are getting mixed up.
JSFiddle also doesn't seem to like the 3 div tags above section 3 but I havent figured out why, yet.
This is because of the location of the <a> tag. You should put it right after the <p> tag you're interested in.
And well, you should tidy up your markup a bit. Everyone knows Irene Adler is attracted by valid webpages.
This is a screenshot of the markup in your jsFiddle example:
As you can see, there are multiple <a>'s with name value "section1", "section2" etc. This will prevent your #sectionX hash to find a unique anchor.
Related
Helping a friend out with her Squarespace site, and she wants to hide a series of categories/tags from her blog posts, except for the first three. I was able to do that easily with CSS with an nth-of-type selector. The problem is, Squarespace has injected (I'm assuming through PHP) a comma after every tag, so it looks like
CATEGORY, CATEGORY, CATEGORY,,,,,,
Because it's Squarespace, I'm unable to get to the PHP file without entering the developer mode which would bar her from easily editing her site on her own.
Here's what the code looks like:
<span class="entry-category" id="yui_3_17_2_8_1474308570683_4842">
COLLABORATIONS
,
Dress, FASHION
,
HAIR
,
<!-- etc. etc. -->
</span>
CSS and JS/jQuery are the only options I have here. Any help is greatly appreciated.
Thanks!
Got a hold of a friend who helped me figure out the issue. Part of it was that I was running an old jQuery reference instead of 2.1.1 or anything remotely recent. The code we were able to get to work was
$('.entry-category').map(function(val, i) {
this.innerHTML = this.innerHTML.replace(/,/g, ' ');
})
Thanks for the input, guys.
is it possible to hide every content after a certrain element (e.g. after a certain class of div)?
The problem is: I'm using a 1&1 webpage builder with a layout-template (annoying like hell) because of my boss. I'd like to remove the footer, but nothing has worked yet as it seems that the template prevents me from hiding the footer with simple CSS (I'm happy for any suggestions here as well).
But maybe it's possible to hide anything that comes after a certain element like a div or image (or whatever) so that I can put the element right before the footer?
Thanks in advance.
You should be able to use JS if it is possible on 1&1.
As you probably have JQuery you can do it like this:
$('.footer-class').remove();
or
$('.footer-class').css('display', 'none');
I don't think that 1&1 would have different classes or ids for footers each time someone refreshes it, so I think it should work.
Please provide a working example or your website address. This will help us.
Can you give us the footer's classes, id and all attributes? The simplest solutions is style="display:none" added to the footer
I have an issue with an external link to a specific layerslider slide (html version, NOT wordpress).
This is the web page:
http://www.jeeltcraft.com/sogea/HTML/slider.html
I asked in the support forum and they told me to use this javasript:
Some text
Which of course you can find in the layerslider documentation page:
http://www.docs.purethemes.net/sukces/layerslider/documentation/documentation.html#deeplinking
but I'm a total newbie about javascript and I cannot get the link working, the worse part is.. I can't understand how this javascript refers to the layername I put in the style"deeplink: layername;" of the layer I want to link; i guess it uses an index number and in the docu you can see that maybe index numbers have to be written on a variable...
The javascript link is located on the "primary-menu" element of the first page i linked, can someone please help me?
Any help will be appreciated gratefully
you can use html) Just write <p><img src="/image_part/image.jpg" border="0" alt="" /></p> PS. From Russia
If you never got this figured out it is because of the $
I ended up using jQuery in place of $ and changed javascript:void(0); to only javascript:; and it works as expected.
I am making a WebApp that dynamically loads news feeds (think a Pulse News WebApp) but I am having a problem that if an article has badly formed HTML (generally misplaced or missing end tags) it trashes my entire layout.
So, my question is: is there a way for me to either economically "fix" the HTML or store it some way other than in a hidden element so that it won't "break" the rest of my code?
Demo: Fullscreen: http://jsfiddle.net/SO_AMK/4pFcm/embedded/result/
Normal: http://jsfiddle.net/SO_AMK/4pFcm/
(Example problematic article highlighted, it has a missing </i> tag)
Please note that this is not the entire app but a static portion. The actual app generates all HTML.
P.S. On a sidenote, does anybody have an idea as to why when you click on or next to the article byline (below the title) it scrolls the tiles of that feed?
Any ideas?
Thank you in advance.
I am having issues with an Ebay template, if I try to upload it get's kicked back to me saying that it cannot contain javascript, I'm assuming that it's in the picture rollover option (mouseover pic enlarging tool) Any help would be greatly appreciated, I'm not real Java intuitive.
Just delete anything between the <script> and </script> tags. Or perhaps post the code snippet here so we can tell you what to remove.
The template should have a HTML file inside.
Search for ... parts and remove them as mentioned before.
Search for instances of onmouseover="...", onmouseout="..." and generally anything that looks like , removing the onsomeevent="dosomething" part.