I am working on a bespoke WordPress build and for some reason, I just cannot get some anchor links to work. It's driving me potty and I just don't know what the problem is.
I have discovered, static anchor links are working fine (the back to top button works). However, I am using Advanced Custom Fields to generate ID's for the anchor tags. The IDs are generating correctly, but won't work as anchor tags.
Anyone have any ideas? The bit I am referring to is the service boxes near the bottom of the page. The idea being you click on these and that they will take you to the services page, and down to the relevant section.
The markup I am using is:
<ul class="cf">
<li>
<div>
<a href="/services/#dimensional-surveys">
<div class="filter"></div>
<img width="500" height="600" src="pexels-photo-175771-500x600.jpeg" class="attachment-feature size-feature" alt="" />
<h3>3D Dimensional Surveys</h3>
</a>
</div>
</li>
</ul>
<ul class="service-list cf">
<li id="#dimensional-surveys">
<div class="feature" style="background-image:url(pexels-photo-175771.jpeg);">
</div>
</li>
</ul>
Just remove the # from id and it will work.
<ul>
<li id="example"></li>
</ul>
I have looked at your page
The point where an ancor should jump to should have no #
You do: <li id="#dimensional-surveys">
But do just <li id="dimensional-surveys">
Fix that first and test again.
You don't want the '#' on the anchor: <li id="#example"></li> should be <li id="example"></li>
Related
I'm using a hybrid HTML/CSS/Java coding sheet that I copied and modified for my own use. So far, the customization has gone well except for trying to link images. The weird thing about it is, it only messes up when I link the first image.
When I link the first image, none of them will show up. If I link only the second and third, all of the images show up and the last two slides even link. I have looked through many times and I still can't understand why it won't work. There isn't anything in the Javascript (that I can see) that doesn't allow links and being that they're simple <li> it seems like it should work normally. Any ideas?
This is the part I'm having issues with:
<div class="container">
<div class="slider_wrapper">
<ul id="image_slider">
<li><img src="/assets/SLC_SewingMachineThread_banner.jpg"></li>
<li><a href="Teddy-Bear-Pattern-Pack">
<img src="assets/SLC_TeddyBear_Pattern_Banner.jpg"></a>
</li>
<li><a href="Leather/Pre-Cut-Leather-Pieces/Oil-Tan-Pre-Cuts">
<img src="assets/SLC_OilTan_PreCut_banner.jpg"></a>
</li>
</ul>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>
Ok so i've been searching for an answer to this for a while and althought there are lots of queries along the same lines, none of them are solving my problem.
Using the following code, I am trying to link a button to a section further down the page..
<img src="assets/images/seetheapp.png" alt="Download the App" width="300" height="48" style="margin-bottom: 100px;">
calling it using..
<a id="tour"></a>
works fine on desktop but not at all on iPhone (even pop up options not working) and only works on iPad in landscape mode... i'm completely stumped!
It is currently live (pulsatedate.com) so need to get it sorted asap.
Linking to the existing section/div id rather than an anchor has been a suitable work around in this instance.
<img src="assets/images/seetheapp.png" alt="Download the App" width="300" height="48" style="margin-bottom: 100px;">
Look carefully at the <head> tag and find maybe some file override and disable anchoring I had this case:
forgot about disabling jquery.mobile-1.4.2.js because I had used before replacing to other framework and forgot to delete or comment
With some jquery, when clicking on the anchor element hide or remove your active class
here is sample code,
<header class="header-section">
<ul class="main-menu">
<li>
<a href="#home" class="js-hide-header">
Home
</a>
</li>
<li>
<a href="#about" class="js-hide-header">
About
</a>
</li>
<li>
<a href="#service" class="js-hide-header">
Services
</a>
</li>
<li>
<a href="#contact" class="js-hide-header">
Contact
</a>
</li>
</ul>
</header>
inside .js file
$(".js-hide-header").on('click', function(e) {
$('.header-section').removeClass('active');
});
We have a banner on our website which appears to be placed in a wrapper of sorts. I'd like to trigger an event depending on which banner is being displayed.
I've deployed a click listener across all pages as well as the necessary event tag but I'm at a loss as to what the firing rule should be.
For the first banner I am using the following firing rule:
event > equals > gtm.click
element url > equals > /videos/Finding-the-right-deal/
Can anyone tell me where I am going wrong?
<div id="content-top" class="clearfix">
<div class="content-slider">
<div class="wrapper">
<ul>
<li><a href="/videos/Finding-the-right-deal/">
<img src="Images/banner-video.png" alt="See Country can help you find the right mortgage deal" /></a> </li>
<li><a href="/mortgages/help-to-buy/">
<img src="Images/htb.png" alt="Help to buy" /></a> </li>
<li><a href="/mortgages/" id="ctl00_ConBody_AdPosition1Link">
<img src="Images/whatmortgagewinnerbanner.png" id="ctl00_ConBody_AdPosition1Image" alt="Award winning advice" /></a>
</li>
</ul>
</div>
</div>
<!--content-slider -->
Try chaning the second condition of your rule from equals to contains. gtm.elementUrl returns the complete url, not just the url path.
I'm using wordpress to host a website for work, and I was finally able to change the name of the site to an image.. But now it looks all weird because the navigation links are still aligned to the left. I'm trying to center them on the page, but I can't find the code to change. The navi links on the blue line are categories, and when I cntrl-F to find categories, only 2 lines show up, & they are just for hiding all the links.
I was wondering if there was a piece of code I should be looking for or if this info is included in the stylesheet & not editable.
Thanks for any help! Also, here's the tester website for ref: http://phitlab.host22.com/wordpress/
Edit: Found the html/ css code that needs editing
<div id="cat-nav" class="clear">
<ul class="nav sf-js-enabled">
<li class="cat-item cat-item-3">
<a title="View all posts filed under Home" href="http://phitlab.host22.com/
wordpress/?cat=3">Home</a>
</li>
<li class="cat-item cat-item-4">
<a title="View all posts filed under People" href="http://phitlab.host22.com/
wordpress/?cat=4">People</a>
</li>
<li class="cat-item cat-item-5">
<a title="View all posts filed under Publications" href="http://phitlab.host22.com/
wordpress/?cat=5">Publications</a>
</li>
<li class="cat-item cat-item-7">
<a title="View all posts filed under Research" href="http://phitlab.host22.com/wordpress/?cat=7">Research</a>
</li>
<li class="cat-item cat-item-6">
<a title="View all posts filed under zContact" href="http://phitlab.host22.com/wordpress /?cat=6">zContact</a>
</li>
</ul>
</div>
</div>
I would look at the HTML source code to check to see if the elements have any classes or ids. If they don't then I would check their parents for classes and ids as well.
Then search the css code for the these classes and ids to find its source code.
Both of these tasks will be easier if you use a browser extension or feature. I like firebug for firefox or ctrl-shift-i in chrome. They can tell you how the styles are decided for each element and what line of the css file to find it.
If what you want to do is center them it probably would be easiest to give the container element that holds your navigation links a fixed width using px or % then set
margin-left:auto;
margin-right:auto;
I have a weirdest thing, in this peace of code a browser adds tags automatically. I disabled all javascript and css, left only simple HTML and still see tags added. Here is my code:
<div id="menu-contact" class="menuNew">
<ul class="navi-list">
<li class="goto">Go to:</li>
<li id="whats">Welcome!</li>
<li>About</li>
<li>Shop</li>
<li><a class="active" href="#menu-contact">Contact</a></li>
</ul>
</div>
and here is what firefox4 sees:
<div id="menu-contact" class="menuNew">
<a> </a>
<ul class="navi-list">
<a>
<li class="goto">Go to:</li>
</a>
<li id="whats">
<a></a>
Welcome!
</li>
<li>
About
</li>
<li>
Shop
</li>
<li>
<a class="active" href="#menu-contact">Contact</a>
</li>
</ul>
</div>
It basically surrounds each tag by a tag. Again, I removed all js and css references..any idea what's going on?? Funny thing, that I have the same code (with unique IDs) in the same page and it renders normally.. only the last snippet adds tags..
My best guess absent a link to a live example is that there is a stray <a> somewhere above that element, and Firefox is attempting to apply it to all the elements below, and of course not having a very happy time of it. A quick HTML validation will reveal if something like that is going on, since either the <a> is unclosed (invalid) or the <ul> is inside it (also invalid).
If that doesn't explain it (which is entirely possible, since I'm just speculating wildly), consider crafting a live example we can inspect in detail. Certainly what you're describing is not normal Firefox behavior, so any clues we can get to what makes your situation different will help.