I am using gohugo-amp theme in a hugo app. In the header, I have a banner I want to dismiss onclick and have the dismissed state stored.
I have tried <a class="page-banner__close" on="tap:page-banner.hide">X</a> however the banner returns when the page is refreshed.
I have also tried using <amp-user-notification> tag. But <amp-user-notification> fixes the banner in the footer.
Is there a way to put a dismissible banner in the header and have that dismissed state stored so it does not return upon refresh??
You can style the amp-user-notifcation component to be placed at the top by adding this to your CSS:
amp-user-notification {
top: 0;
bottom: inherit;
}
Related
I have a WordPress site where I added banner and sidebar filter option. But the banner shows as a conflict with filter option. If I added margin-top:300px then it goes down but this change applies to every page. I want to change this for the specific page only because I don't have banner on every page.
My site: http://motor.racedrivenonly.com/shop
Header image below:
There are classes added to the body tag in WordPress. Try to determine the proper body class ad you'll be able to add the margin based on a particular page template or type of page.
Try something like this:
.post-type-archive-product .blog-sb-widgets {
margin-top: 300px;
}
I am having trouble with two buttons at the top of my mobile site
www.thefriendlydentist.ie
They are clickable on desktop but on mobile I get no response?
The html is placed in the header of the WP theme.
<div id="topcontact-2" style="background-color:white;">
<p style="background-color:white;padding:none;"class="call-button" id="call-button"> CALL US </p>
<p style="background-color:white;padding:none;" class="call-button" id="email-button"> EMAIL US </p>
</div>
You need check your all elements (divs) properly, I strongly suggest you using mobile device toolbar on Chrome or Mozilla.
If you look on desktop browser using by mobile device toolbar, you will see the some elements overlapping the all page. So your buttons that you want to click stay behind of those elements.
- Option 1: remove overlapping elements
- Option 2: use z-index to manage them.
<div class="mobile-bg-fix-img-wrap">
<div class="mobile-bg-fix-img" style="/* width: 375px; *//* height: 767px; */"></div>
</div>
You can see in image how above elements fill the page.
How Z-Index Works?
All of us are quite comfortable set some x (left:10px) and y (top:10px) values to elements by using CSS but not for z-index. Z-index property defines the level of an HTML element on the screen. Let's check the elements below.
In brief, z-index will define the closeness of the elements to the user. In this sample you can assign elements like below:
red square z-index:10
blue circle z-index:56
white square z-index:985
in this order, nothing will change. In this case, we know that z-index is relative. Another important thing, we need to know about z-index, it will only work on an element whose position property has been explicitly set to absolute, fixed, or relative
To deep dive, please check the z-index documentation.
How to Activate Mobile Toolbar on Chrome?
Mobile toolbar shows how your elements are placed in a mobile browser. Using this tool, you can detect almost everything you would expect to see in a mobile browser. You can also inspect and alter your CSS codes easily.
Below image will guide you to how to activate mobile toolbar on Google Chrome.
Other Possibilites For The Problem
1. Javascript Blocking
Using javascript, you can override original behavior of an HTML element. Check below code, this will prevent the real action of the <a> element.
Non-clickable Link
Using JQuery
<script>
$(".prevent-click").click(function(){
return false;
})
</script>
Using Javascript
document.getElementsByClassName("prevent-click")[0].addEventListener('click', function (event) {
event.preventDefault();
return false;
});
Please check your codes carefully, is there any Javascript code to prevent the original action of HTML elements. In addition, to check this quickly, you can disable all javascript codes on Chrome by following steps below.
Open Developer Console
Go to Settings - right top corner of the inspection tool
Check the box (Disable Javascript)
Refresh the page.
Please go in to your CSS and make this change.
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
left: 0;
top: 0;
background-size: cover;
}
To:
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
background-size: cover;
}
The top and left set to 0 was overlapping the two buttons causing it that you could not click on them.
HTML links not clickable on mobile, but are clickable on desktop.
I have one solution. Try this
Html
<a href="https://www.stackoverflow.com" class="goclick">
css
.goclick{
position: relative;
z-index: 9;
}
For this, go to Google Chrome > Developer tools.
Inspect the element, if it is being overlapped by anything, add clear: both;
to the overlapping element.
Actually, in my issue, it fixed everything.
for me, i had a class with...
z-index: -1
which was forcing the parent <div> to the back. changing this to 0 or simply removing it, solved the problem
ref: https://www.sitepoint.com/community/t/solved-href-not-working/248882/6
I need to create a popup like the map has here on this page, but I'm not sure how best to do it and wondered if anyone could point me to some code would match that effect?
Any ideas would be great.
The Twitter Bootstrap modal jQuery plugin is really nice. You can get the html and javascript for it by customizing bootstrap here: http://twitter.github.io/bootstrap/customize.html
select only Modals from the components section and modals from the jQuery plugins section, and nothing else. Then download.
How to use it can be found here:
http://twitter.github.io/bootstrap/javascript.html#modals
basically what you do is in your markup, make a div that will be the popup, and give it the classes "modal hide fade". And then make something that will be the button to toggle the modal, and give it the attributes data-target="(the css selector of the modal div)" and data-toggle="modal".
To create a basic dialog/modal, you just need to create a new div or show an existing div with position: fixed and z-index: 1000 (or some other high value) using JavaScript. That div can have whatever contents you like. Along with the dialog/modal div, you would probably want a backdrop div as well, probably with at least the following styling:
position: fixed;
height: 100%;
width: 100%;
z-index: 500; // or some other high value
If you don't want to create your own, you could take a look at jQuery UI dialogs or bootstrap modals.
I have taken over a website that was coded in tables (looks like DW) and is half coded in typo3 CMS and half hard coded.
Anyway, my boss has asked me to make the logo clickable to link to the homepage from every page that the logo shows. The problem is that the logo is part of the whole image that makes up a third of the page, so linking the whole image is out of the question.
I don't want to have to restructure and slice the images to separate the logo from the BG image, so is it possible to place a link section over the logo only?
I thought about an empty div that sits over the logo section only with a link tag that fills it 100%, is this possible and would it work? The site is here http://overbeckanalytics.com/typo3/menu-top/about-us.html... you can save the BG image and see its not just the logo...
Please tell me how I can make a link that sits over the logo only on that image.
Is the background image on the <body> element? If so, this should work:
<body>
Example Company
</body>
With this CSS:
a#logo_link {
position: absolute;
display: block;
visibility: hidden;
left: 42px;
top: 42px;
width: 42px;
height: 42px;
}
Note the <a> tag needs to be directly inside the <body> tag, or else the position may be incorrect. It can be anywhere in the body tag however, at the beginning or the end.
I've also placed the company name inside the link, since it's a bad idea to have a link without any text. A blank link cannot be understood by browsers designed for disabled users, and it may trigger spam algorithms in search engines. The visibility property will make the link invisible, even though it is still there and can be clicked on.
I provided an example answer. If you're allowed to load a JQuery library and can place the anchor somewhere on the page.
http://jsfiddle.net/XFvQD/
You would be looking for something like this:
<html>
<body>
<img src="http://listphobia.com/wp-content/uploads/honda-v4-concept1.jpg"/>
</body>
</html>
I want a login page that will slide down from the top of the web page. BUT I want it to move the whole website down rather than covering the page.
Anyone can refer me to a link?
Erik
One way to do it is to use relative positioning in your HTML so that the main content flows after the login. This means all you have to do is resize the height of the login div to push down the rest of the content:
<div id="thePage">
<div id="login"><!-- login stuff here --></div>
<div id="restOfThePage"><!-- The rest of the page here --></div>
</div>
CSS would be something like this:
#login { height: 0; }
Then when you wanted to show the login panel through JavaScript, you'd just do this:
document.getElementById("login").style.height = "100px"; // for example
Or if you wanted to animate the login panel, you could use jQuery or any number of JavaScript libraries with animation capabilities.
If you are using jQuery then .slideDown() method is what you want.