In my site i have this problem:
I want that all pages is scrollable if the device have a touch display. My site run into IE
I try with apply touch-action pan-y on my principal div but no result.
Add style to head of your html document
<style>.tst{overflow: hidden;}</style>
Add this line in body tag
<body class="tst" onload ="NoScroll()">
//content here
Add this inside script tags
function noScroll() {
var page = document.getElementsByTagName("body")[0];
if ('ontouchstart' in document.documentElement) {
console.log("touch device detected");
page.classList.remove("tst");
}
else{
console.log("desktop mode");
page.classList.add("tst");
}
}
Related
I have an 'overview' html page with lots of product images - each image links to a page that may have 3 or 4 products, eg, src="gadgets-1.html"
On desktop, on the destination page the user can see most products or can easily scroll down if needed.
But on narrow screen where the css MQs convert all columns to 100% width, the last items are not necessarily in view and the user must intuit that it's necessary to swipe down the page, so I want the linking image to link directly to the relevant item on the destination page.
I've established anchor links which work well, eg, src="gadgets-1.html#red-thing" but I don't want the '#red-thing' to be active on wider screens.
To resume, I want the link to be gadgets-1.html on wider screen and
gadgets-1.html#red-thing on narrow screen.
I don't see how this can (or should) be done with css. Should js or php be used? If so, how?
There are a couple of solutions I can think off of the top of my head. I don't usually like using javascript to modify the DOM based on screenwidth but it is an acceptable solution if you are so inclined.
OR you can do something simple like this:
<div class="links">
<a class="mobileLink" href="gadgets-1.html#red-thing">gadgets-1</a>
<a class="desktopLink" href="gadgets-1.html">gadgets-1</a>
</div>
with some css to hide the right link based on screen width
.mobileLink{
display: none;
}
#media screen and (max-width: 992px) {
.mobileLink{
display: inline-block;
}
.desktopLink{
display: none;
}
}
A flexible solution would be to use Javascript with a specific data- attribute for storing the different anchor names.
HTML:
<a class="targetLink" href="/link1" data-anchor="anchor-name1">Target link</a>
<a class="targetLink" href="/link2" data-anchor="anchor-name2">Target link</a>
To execute the code cross-browser on DOM ready and window resize, jQuery would be useful.
Check CodePen here
$(document).ready(function() {
var $target = $(".targetLink");
var $window = $(window);
var breakpoint = 640;
var linkSmall = false;
function checkWidth() {
if ($window.width() <= breakpoint) {
// appends anchors to links
if(!linkSmall){
$target.each(function(index) {
var href2 = $(this).attr("href") + "#" + $(this).attr("data-anchor");
$(this).attr("href", href2 );
});
linkSmall = true;
}
}else{
// removes anchors to links
if(linkSmall){
$target.each(function(index) {
var href1 = $(this).attr("href");
var a = href1.indexOf('#');
var href2 = href1.substring(0, a != -1 ? a : href1.length);
$(this).attr("href", href2 );
});
linkSmall = false;
}
}
}
checkWidth(); // on document ready
$(window).resize(checkWidth); // on window resize
});
As you don't want to repeat anchor elements(as per the other threads), you won't be able to do it with css so you'll have to use js.
if(window.innerwidth < 911){
document.getElementsByClassName("class")[0].setAttribute("href", "url_for_small_screen_devices);
}else{
document.getElementsByClassName("class")[0].setAttribute("href", "url_for_normal_desktop_and_bigger_devices");
}
you can use a loop to repeat the same process for all anchors with using proper selectors.
I have a Html page which has anchor tag, I Need to remove certain style applied already in html page for anchor tag while the html page is opened throw Iframe.
HTML Content as below:
<html>
<body>
<div>some content<a href="http://www.website.com" name="test1"/> some content </div>
</body>
</html>
I tried as below:
a[name^="test1"]:before{
content:"[prefix text]";
display:inline;
color:red;
}
a[name^="test1"]:after{
content:"suffix text";
display:inline;
color:green;
}
iframe a[name^="test1"]:before{
display:none;
}
iframe a[name^="test1"]:after{
display:none;
}
But inside "iframe" also these styles has been applying.
You have to first detect if your page is rendered inside an iframe and in that case apply an alternative CSS. It' can't be done with vanilla CSS then it has to be done with some JavaScript:
<script type="text/javascript">
function getTopWindow() {
try {
return window.top;
} catch {
// If we can't access window.top then browser is restricting
// us because of same origin policy.
return true;
}
}
function isRendererdInFrame() {
// If top window is null we may safely assume we're in iframe
return window.self !== getTopWindow();
}
function loadCss(location) {
if(document.createStyleSheet) {
document.createStyleSheet('http://server/stylesheet.css');
} else {
var styles = "#import url('" + location + "');";
var newSS=document.createElement('link');
newSS.rel='stylesheet';
newSS.href='data:text/css,'+escape(styles);
document.getElementsByTagName("head")[0].appendChild(newSS);
}
}
</script>
Code to load CSS from JavaScript is from How to load up CSS files using Javascript?.
With all that code you may simply write (even just after that inside <script> block):
var cssToLoad = isRendererdInFrame() ? "iframe.css" : "not-iframe.css";
loadCss("http://server/" + cssToLoad);
Of course same technique can be applied to patch CSS with iframe specific styles:
if (isRenderedInFrame())
loadCss("http://server/iframe-patch.css");
i dont know how to detect if page is opened in iframe or not, but there is one possible(not very nice) workaround, you can set iframe to width which is not commonly used by devices (example 463px) and then set media query for this resolution which apply when content is shown in this iframe. This is really nasty way since its not 100% and i would not recommending that.
I am new to html. Can I make a particular div in my web-page appear in fullscreen when I press alt and space keys? This is my code.
<!DOCTYPE html>
<html>
<body>
<p>This is some text.</p>
<div style="color:#0000FF">
<img src="./1.jpg" height="42" width="42">
</div>
</body>
</html>
Use the full-screen pseudo class (for webkit and mozila) :
:-webkit-full-screen {
/* css rules for full screen */
}
:-moz-full-screen {
/* css rules for full screen */
}
See this Mozilla article and this David Walsh article for usage
HTML and CSS provide no means to trigger full screen mode for an element. JavaScript is your only option.
HTML 5 introduces a full screen API for JavaScript. It is still experimental, so you need to use prefixed property names in some browsers and it won't work at all in others.
function makeFullScreen(element) {
if (element.requestFullScreen) {
element.requestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullScreen) {
element.msRequestFullScreen();
}
}
You then just need to bind an event handler to call it.
document.addEventListener('keypress', function (evt) {
if (evt.altKey && evt.keyCode === 32) {
makeFullScreen(document.querySelector('div'));
}
});
Beware of depending on modifier keys though. On my system, alt + space is captured at the OS level (to open Spotlight) so it will never reach the browser.
I have added the facebook like button <fb:like href="http://mysite.com" class="myFacebook" layout="button_count" ></fb:like>.
When my page loads in any ie there is a noticeable white background before the like button appears, is there any way of removing this?
This is the iframe loading its content.
You could set visibility: hidden on the iframe, and then show it once it has loaded to avoid this.
Simply hide the container with CSS and then display it once the iframe has loaded, this can be done two ways:
<style>#fblike { visibility:hidden; }</style> /* Hide container */
<script>
FB.XFBML.parse(document, function(){
$('#fblike').css({'visibility':'visible'}); /* Show container once loaded */
});
</script>
If you are not using this FB.XFBML.parse() function then you can subscribe an event when everything has rendered instead:
window.fbAsyncInit = function () {
FB.init({
appId: 'APP_ID',
xfbml: true
});
FB.Event.subscribe('xfbml.render',
function () {
$('#fblike').css({'visibility':'visible'}); /* Show container once loaded */
}
);
};
Took me a while to find this all out! Here is a link to where I found my solution: http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
You should set allowtransparency="true" in iFrame.
I had to do like this to make it work
.fb_iframe_widget_fluid{
background:none !important;
//If you want no padding and no margin
padding:0 !important;
margin:0 !important;
}
I have added the facebook like button <fb:like href="http://mysite.com" class="myFacebook" layout="button_count" ></fb:like>.
When my page loads in any ie there is a noticeable white background before the like button appears, is there any way of removing this?
This is the iframe loading its content.
You could set visibility: hidden on the iframe, and then show it once it has loaded to avoid this.
Simply hide the container with CSS and then display it once the iframe has loaded, this can be done two ways:
<style>#fblike { visibility:hidden; }</style> /* Hide container */
<script>
FB.XFBML.parse(document, function(){
$('#fblike').css({'visibility':'visible'}); /* Show container once loaded */
});
</script>
If you are not using this FB.XFBML.parse() function then you can subscribe an event when everything has rendered instead:
window.fbAsyncInit = function () {
FB.init({
appId: 'APP_ID',
xfbml: true
});
FB.Event.subscribe('xfbml.render',
function () {
$('#fblike').css({'visibility':'visible'}); /* Show container once loaded */
}
);
};
Took me a while to find this all out! Here is a link to where I found my solution: http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
You should set allowtransparency="true" in iFrame.
I had to do like this to make it work
.fb_iframe_widget_fluid{
background:none !important;
//If you want no padding and no margin
padding:0 !important;
margin:0 !important;
}