So first of all let me admit I'm not the best at coding, I'm a graphic designer but I 'm trying to teach myself HTML5. I have managed to troubleshoot most of my problemsbut I'm stumped now.
Essentially my problem is when you click a thumbnail within the iframe, it aligns the thumbnail at the very top of the screen. I tried adding translateY to the "page" class, and I also tried it inside the iframe pages but that caused the main picture to be misaligned.
My testpage is online at http://www.brodylahd.com/index2
In reply to Cat Chen
yes i think that is what i need to do... but will it still have the same horizontal movement?
Thumbnail links aligning the it's container at the very top of the screen on click because you are using anchors (Uri Fragments) like #a1 #a2 #a3 in href attributes.
You can try to remove that fragments or prevent in-page movement using a small javascript workaround like this:
$('#thumbs').find('a').bind('click', function() {
return false;
})
This is an issue with going to anchors in iframe, so that browsers tend to center on the content in them if you're targeting them.
The simplest solution in your case (but not ideal) is to control where the scroll would be, so if you'll add
#a1 { position:relative; top: -186px; }
#wrapper { position:relative; top: 186px; }
The page would be centered more visually correct, but still would scroll.
If you want to still use CSS, you can try to change your links+#aN:target .page{…} behavior to a one, that would use labels and radio-buttons that would go before .page blocks: #aN:checked+.page{…}, but I'm not sure if browsers would or wouldn't scroll the page when you're using radios instead of links.
Related
I'm trying to make a Timetable for a festival in HTML and CSS. A lot of work has been done, but I can't figure this one out. So I made a Timetable using lists 'UL' 'LI' in HTML, with styling in a CSS document.
At the moment it looks like this.
Look at the screenshot here.
Because it is a very huge timetable, there is a horizontal scroll. What I'm trying to figure out is how to let the text of the stage name, for example, 'Har & Mar' to scroll with the page, so it stays on the left when you scroll to the left or right. Because that ain't the case at the moment ;P
I tried everything to fix this problem, but I don't know how to get this done. Please send help! My code is down here:
<iframe width="100%" height="300" src="//jsfiddle.net/CasperBoon/ayjsuLxe/embedded/html,css,result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
Best regards,
Casper Boon
If you have any method of selecting which name will be floating, then you can achieve it by applying position: fixed; property to that name's container. According to your code, it should look something like this (for 'Har & Mar'):
CSS
li.stage-0 > .stage-name {
position: fixed !important;
left: 0;
}
I suppose you will want to have all names fixed on the left when scrolling, so it could look like this:
CSS
li > .stage-name {
position: fixed !important;
left: 0;
}
With only css will be really hard.
But using jq or js this become very easy.
Here is how you could do it
I Assumed that show-right-shadow is the scrollable element
$(".show-right-shadow").scroll(function(e){
var left = this.scrollLeft;
$(".stage-name").css(// make all the divs [stage-name] follow the scroll
{
position:"absolute", // use absolute and not fixed, so u dont mess upp the design
left:this.scrollLeft, // follow the scroll
"z-index":9999, // make it at top of all other elements
})
});
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 am using the following html to position anchors under a fixed menu:
<a style="position: relative; top: -150px;" name="services"></a>
This works fine in Firefox but ie, chrome and safari all load the anchors to a slightly different position, obscuring the text 'under' the fixed menu.
Does anyone have any ideas of how I could go about resolving this issue.
wip site is http://mattangel.com.au
Many thanks in advance,
Matt
When I make sites like this, I like to make sure that each "page" has a similar class, but different id. When styling the class, make sure you give the following attributes.
.page {
overflow: hidden;
margin-bottom: 1000px;
}
Adding the margin-bottom will prevent you from seeing the extra pages.
I also noticed that you are using jQuery for the slide to effect, I am not sure why you are using the styling for the a name. Just do the following:
<h1 class="page_title" id="services"><a name="services">Services</a></h1>
And make sure to wrap everything up in the page DIV.
We are having a problem with our facebook like/send button, if you open: http://apps.facebook.com/bymii-test/products.php?pageid=216605071714962&prd_id=35&prd_name=Coalesce: - click facebook send, the box is behind the facebook sidebar. Is there any way to: change the z-index - or to make the window pop up on the left?
I FINALLY FOUND THE ANSWER!! 1 1/2 Hours searching later.. just enter this code into your CSS file:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
top: 15px !important;
left: -250px !important;}
Hope this is what you were looking for, because it was exactly what I was looking for!
Make sure the parent/container element has css value "overflow:visible". It happens when "overflow:hidden". Hope this helps.
The way for it to popup up and over all of it is to make the like button work in XFBML. The iframe implementation is limited and if you change the height and width of it to just fit the button, the window will appear hidden.
I found this to work:
/* the below allows the fb:like iframe to show entirely instead of getting cropped off */
.fb-like iframe {
max-width: inherit;
}
/* the same issue with the "send" button */
.fb-send iframe {
max-width: inherit;
}
As you can see, it's asking those elements to "inherit" the width attributes of its parent elements.
Hope that helps.
I modified Shane's excellent solution to focus specifically on z-index:
css:
.fb_edge_widget_with_comment span.fb_edge_comment_widget
{
z-index:8 !important;
}
The above css code shows the Facebook widget above everything else, without having to relocate or "overflow" anything.
This is a common problem all developers are facing. The popup has no way to detect its relative position on a page or in an iframe.
To get the desired results i always install my like, send buttons on the left side of my page.
I recently had an idea for using the CSS pseudo-class :hover to display a styled tooltip when the mouse is hovered over a link.
The basic code for the link looks like this:
.hasTooltip {
position:relative;
}
.hasTooltip span {
display:none;
}
.hasTooltip:hover span {
display:block;
background-color:black;
border-radius:5px;
color:white;
box-shadow:1px 1px 3px gray;
position:absolute;
padding:5px;
top:1.3em;
left:0px;
max-width:200px; /* I don't want the width to be too large... */
}
This link has a tooltip!<span>This is the tooltip text!</span>
The result is exactly what I want, but with one annoying problem: the span does not expand to accommodate text, and if I don't specify a width, the text is squashed.
I did some searching on Google, found a couple examples of work people had done (this example is creepily similar to what I've gotten), but no one seems to have addressed the span width problem I'm having.
I know this answer is extremely late, but it appears the key to your issue would be to use:
white-space: nowrap;
inside of your span, and get rid of any sort of width definition. Of course the drawback to this will be that the tooltip will only be able to support a single line. If you want a multiline solution you will most likely have to use javascript.
Here is an example of of this method:
http://jsbin.com/oxamez/1/edit
An added bonus is that this works all the way down to IE7. If you do not need to support IE7, I would suggest folding the span, and img styles into a :before, and :after for the .tooltip. Then you can populate the text using the data-* attribute.
I don't think there's a perfect solution to this problem with pure CSS. The first problem is that when you place the span inside the a tag the span only wants to expand as far as the width of the link. If you place the span after the the a it's possible to get close to what you're trying to do but you'll have to set the margin-top: 1.3em and then have to set a negative margin to slide the tooltip left. However, it's going to be a fixed setting so it won't sit exactly at the start of each link.
I whipped up a jQuery solution that sets left dynamically (and a nice little fade effect for good measure).
Demo: http://jsfiddle.net/wdm954/9jaZL/7/
$('.hasTooltip').hover(function() {
var offset = $(this).offset();
$(this).next('span').fadeIn(200).addClass('showTooltip');
$(this).next('span').css('left', offset.left + 'px');
}, function() {
$(this).next('span').fadeOut(200);
});
These tool tips can also be integrated into a word press theme easily. Just copy the CSS into your style. Css file and when creating your posts, just take help of the HTML code and create your own tool tips. Rest is all styling, which can be altered according to your own choice. You may also use images inside the tool tip boxes.
http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/
Even though this question is a bit older already, I would suggest the following compromise:
Just use max-width: 200px; and min-width: 300%; or so,
whereas the min-width could result higher than the max-width.
Just figure it out.
This way you could not have entirely liquid tooltips but the width would stand in kind of a correlation with the width of the containing link element.
In terms of optical pleasantness this approach could be of value.
edit:
Well I must admit it is nonsense what I wrote. When the min-width can be higher than the max-width, there is no sense to it.
So just putting the min-width in percent would achieve what I tried to suggest.
Sorry for that.
I found this and it was working for me. It's a good solution when you have a lot of elements and jquery plugins on the same page and you can't work with
Text <span>Tooltip</span>
View pure CSS solution: JS BIN
Credit to trezy.com