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');
});
Related
When I change the path to the correct routes in the url bar I get where I need to go and everything displays correctly. The actual router links are not taking me anywhere.
I have NgModule, Routes and RouterModule all imported properly in my only module. I have my components imported properly. router-outlet is properly placed. I have base href="/" in the head of my index.html.
Here is part of my html:
<section class="vertical-sidebar collapse navbar-collapse justify-content-end" id="navbarSidebarContent-main"
[ngClass]="{'show':displaySideNav}">
<nav class="nav">
<ul class="sidebar-links">
<li>
<a routerLink="/home">Home</a>
</li>
<li>
<a routerLink="/manage-sessions">Manage Sessions</a>
</li>
<li>
<a routerLink="/export-scancodes">Export ScanCodes</a>
</li>
<li>
<a routerLink="/imu-data">IMU Data</a>
</li>
<li>
<a routerLink="/global-order-days">Global Order Days</a>
</li>
<li>
<a routerLink="/order-exception-report">Order Exception Report</a>
</li>
</ul>
</nav>
</section>
I expect to be directed to the correct path when I click on the link. Nothing happens when I do so.
Try as mentioned in docs
<ul class="sidebar-links">
<li>
<a routerLink="/home">Home</a>
</li>
....
</ul>
After a lot of trail and error yesterday I realized the issue came because a lot of the code had been given to me as boilerplate code that had been manually upgraded from Angular6 to 8. I created a new project in the cli from scratch and copied over my components and had no issues.
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>
I created a site using Boostrap and WAMP Server and now I am trying to move it to a virtual server, so more people could use it.
The site looks fine, but when clicking a drop-down toggle for example, it doesn't display anything, it just goes to href="#"
My element looks like this:
<li class="dropdown" style="border-radius: 5px;">
<a target="_blank" href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white;font-size: medium; background-color: #8A2BE2;border-radius: 5px;">Search <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span></a>
<ul class="dropdown-menu forAnimate" role="menu">
<li><a target="_blank" href="search_1" style="color:#601e9e;font-size: medium;border-radius: 5px;">Option 1</a>
</li>
<li><a target="_blank" href="search" style="color:#601e9e;font-size: medium;border-radius: 5px;">Other Options</a>
</li>
</ul>
</li>
Is there anything I need to change? I moved all the files and folders.
You probably missed the bootstrap JavaScript file. Make sure you add after your footer and it should be fine. Your code should have something like this:
<script src="/js/bootstrap.min.js"></script>
Make sure ti put your script after jQuery script. Additionally, you may have this script, but it can't find the file in the specified location. Check if the file exist on your server.
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.
In the middle of my page I have this <div> which includes a list. When I view the page source I see all the code there, but the only thing actually rendered for the user to see in the browser is the "Brand" h4 heading. (note that this is actually generated dynamically, and this is example output)
Also I have checked in several different browsers on several different machines so I don't think thats the issue
Is there something obvious I'm missing here why my list is not displaying?
<div class="filter-group filter-group-brand">
<h4>Brand</h4>
<ul class="nav-brand ">
<li class="collection-container aimpoint active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag aimpoint"
href="/collections/firearm-accessories/aimpoint">
<i class="check-icon"></i> Aimpoint
</a>
</div>
</li>
<li class="collection-container aimshot active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag aimshot"
href="/collections/firearm-accessories/aimshot">
<i class="check-icon"></i> Aimshot
</a>
</div>
</li>
<li class="collection-container barska-optics active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag barska-optics"
href="/collections/firearm-accessories/barska-optics">
<i class="check-icon"></i> Barska Optics
</a>
</div>
</li>
</ul>
</div>
Without any CSS this works well and <li> elements will appear. Always think about giving your CSS code when you have a display error/problem
You must have an error in your CSS file. Check for display:none or hidden properties, etc on the following classes : collection-name, new-brand, collection-container.
Also you have empty <i> tags, just in case it's an error.