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.
Related
I want the html to open when the password is right and I have tried .js, document.write, .html, href, div, document.getElementById and nothing is working when it's inside the if condition but I need it in there so it opens when the condition is right.
<script>
function 123()
{
var pass=document.getElementById("pass").value;
if(pass=="password")
{
alert("Logged In");
here is where the HTML code should go;
}
}
</script>
You can create the html element in this page and give this element display none and when the password is correct change display example:
if(pass=="password") {
alert("Logged In");
document.getElementById("page").style.display="block";}
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");
}
}
I have a text + image side by side, and I want a function where the user can click on the image to make it bigger. I'm new to HTML/CSS so I was wondering how I can approach this. Thanks! (demo -> https://jsfiddle.net/DTcHh/6634/)
Is there any way to do this with pure HTML/CSS and no javascript?
The ones I found have been telling me to use javascript such as:
<script type="text/javascript">
function showImage(imgName) {
document.getElementById('largeImg').src = imgName;
showLargeImagePanel();
unselectAll();
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.visibility = 'visible';
}
function unselectAll() {
if(document.selection) document.selection.empty();
if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
obj.style.visibility = 'hidden';
}
</script>
Is there a simpler way to do this in HTML/CSS?
You could use a CSS pseudo-class to change the styling when, for example, the mouse is over the image:
img:hover {
width: 300px;
height: 300px;
}
Generally, though, to add interactivity to your web pages, you will have to become acquainted with JavaScript. I don't know of any way to toggle a state (e.g. "zoomed-in") without the use of JavaScript.
You can think of the HTML as defining the content, the CSS as defining how it looks, and the JavaScript as defining how it behaves.
I would like to add a section to an existing webpage, but only make it visible if the user types the URL with a particular anchor link. Is this possible? Or is it possible to redirect to a new page if the URL has a certain anchor link?
Since you don't mind using JS, you can listen to the onhashchange event to decide whether the specific section should show.
http://jsfiddle.net/C3kHT/
window.addEventListener("hashchange",function(){
if(location.hash=="#trap") /*show section*/
},false);
Sorry that I don't have an IE 8 at hand, so I'm not sure if the fiddle code actually work in IE 8.
To redirect if a url has a certain anchor:
var anchor = "#tag";
var url = "http://www.google.com";
if(window.location.indexOf(anchor) !== -1){
window.location = url;
}
Maybe try this. Start out with your hidden section set to display: none;, then use jQuery to unhide it based on the hash in the url.
CSS:
.hiddenDiv {
display: none;
}
jQuery:
function showDiv() {
if (window.location.hash === '#hashNecessaryToShowDiv') {
$('.hiddenDiv').css('display', 'block');
}
}
showDiv();
When you have a url like this www.example.com/#signup, what the browser does is just to focus it's view on the HTML element with id signup, is that right?
Is it possible to change the element's CSS style if it's focused in that way?
E.g. let's say I have a div element, with the id signup, then if I enter www.example.com, the div's background is white and if I enter www.example.com/#signup it's yellow. Like "emphasizing" the sign up form. Is this at all possible?
:target { background-color: yellow; }
The :target psuedo-class does exactly this.
You can read the window.location.hash property when the page loads and apply the corresponding css classs. Something like:
<script type='text/javascript>
function init(){
var hash = window.location.hash.substr(1);
var element = document.getElementById(hash);
if(element){
element.className += " emphasize";
}
}
</script>
<body onload="init()">
...
</body>