I use metro-ui-css for my webapp, the look and feel is great. Now I load a word document (with its own style) into a DIV. After word document is loaded, it will override some metro-ui-css style rules, so that the look and feel becomes unexpectedly...
To simplify the problem, I create a demo below. After clicking the button, I want only text below to be blue, not all of them. The question is besides using <iframe>, is it possible to isolate the style definition?
function insert() {
$('#fragment').html(`
<html>
<head>
<style>*{color:red}</style>
</head>
<body>
<div>INNER CONTENT SHOULD BE RED</div>
</body>
</html>`
);
}
<html>
<head>
<style>*{color:blue}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<p>OUTER CONTENT SHOULD BE BLUE</p>
<button onclick="insert()">Load into DIV</button>
<div id="fragment" style="margin-top:10px;border:1px dashed black">PLACEHOLDER</div>
</body>
</html>
I understand you can't modify the html and you must change the function so the div has red text. You can do that by changing in <style>div{color:red;}</style>
function insert() {
$('#fragment').html(`
<html>
<head>
<style>div{color:red;}</style>
</head>
<body>
<div>INNER CONTENT SHOULD BE RED</div>
</body>
</html>`);
}
<html>
<head>
<style>*{color:blue}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<p>OUTER CONTENT SHOULD BE BLUE</p>
<button onclick="insert()">Load into DIV</button>
<div id="fragment" style="margin-top:10px;border:1px dashed black">PLACEHOLDER</div>
</body>
</html>
Since CSS :scope is experimental and the loaded content is out of control, you could do like this, where you give the outer most body a unique id and use that to get highest possible specificity for your controlled elements.
Also, when target your controlled elements, you need to make sure to use highest specificty possible, so those rules doesn't override the loaded one's, or get overridden by the uncontrolled content rules.
As you see when click the button, its text gets red but not the wrapped elements.
function insert() {
$('#fragment').html(`
<html>
<head>
<style>*{color:red}</style>
</head>
<body>
<div>INNER CONTENT SHOULD BE RED</div>
</body>
</html>`);
}
#outer-body > .wrapper * {
color: blue
}
#outer-body > .wrapper .other {
color: lime;
margin: 10px 0;
}
#outer-body > #fragment {
margin-top:10px;
border:1px dashed black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="outer-body">
<div class="wrapper">
<p>OUTER CONTENT SHOULD BE BLUE</p>
<div class="other">
Other text target with its class
</div>
</div>
<button onclick="insert()">Load into DIV</button>
<div id="fragment">PLACEHOLDER</div>
</body>
Related
In the following situation, how can add cursor:pointer to only the second div which contains the text Cursor pointer required here.
The div with class="x95qze" remains the same. The div or text within it is added/removed using javascript.
cursor:pointer is required only when there is plain text inside div class="x95qze
<!DOCTYPE html>
<html>
<head>
<title>Cursor</title>
</head>
<body>
<div class="x95qze">
<div class="RiYDI">No cursor pointer required here</div>
</div>
<div class="x95qze">Cursor pointer required here.</div>
</body>
</html>
CSS:
.x95qze {
border:1px solid black;
padding:5px;
}
.x95qze .RiYDI {
border:1px solid black;
width:50%
}
Try this:
HTML
<div class="x95qze"><span id="js-output">Cursor pointer required here.</span></div>
CSS
#js-output {
cursor:pointer;
display:inline-block;
}
if you know the text you can use pure javascript includes
First find the text
const sentence = 'The quick brown fox jumps over the lazy dog.';
const word = 'fox';
console.log(`The word "${word}" ${sentence.includes(word) ? 'is' : 'is not'} in the sentence`);
// expected output: "The word "fox" is in the sentence"
if (sentence.includes(word)) {
let element = document.querySelector('.x95qze);
element.setAttribute("style", "cursor:pointer;");
}
more info MDN
Jquery has a text selector called :contains(text).
After updating content, i call a function which iterates over .x95qze classed tags and adds cursored class to tags those has no children.
And in css for cursored class I add a rule of cursor:pointer.
function checkCursors(){
$('.x95qze:contains(Cursor)').each(function(i, container) {
$(container).toggleClass('cursored', $(container).children().length == 0);
});
}
// After content updated
checkCursors();
.x95qze.cursored { cursor:pointer; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Cursor</title>
</head>
<body>
<div class="x95qze">
<div class="RiYDI">No cursor pointer required here</div>
</div>
<div class="x95qze">Cursor pointer required here.</div>
</body>
</html>
I have a huge CSS/bootstrap file and it affects not just the elements. I want it to do that, but the css affects the whole page. I can't change every elements name to [name].slider. So is there an easy way to make it only affect elements inside a container?
<head>
<!--the stuff in here is also affected-->
</head>
<div>
<!--Stuff to get affected-->
</div>
Sure, put an id or class on the target div, and add that id or class to the start of the css file. If you are using Less or Sass you can just nest the contents of the entire file inside a rule with the id or class.
.my-styled-section h3 {
color: green;
}
.my-styled-section {
color: red;
}
<head>
<!--the stuff in here is no longer affected-->
<h3>Test</h3>
<p>Test</p>
</head>
<div class="my-styled-section">
<!--Stuff to get affected-->
<h3>Test</h3>
<p>Test</p>
</div>
Im trying to design this webpage with multiple pages. For example, when you scroll to the about page, its a different background color than the contact page. However, so far I only got the title of each page color. My webpage is where you scroll down it lands onto another page. I tried
#name{background-color:#ffffff;}
#Portfolio{background-color:#d5f4e6;}
#about{background-color:#fefbd8;}
#ContactMe{background-color:#ffffff;}
in the css style page based on its id. Any clue on how to get the different background color on different pages
html code:
<body id="Portfolio"></body>
<body id="about"></body>
<body id="Contact Me"></body>
When you say "multiple pages" it means "separate pages in separate files!" like "aboutpage.html" or "contact.html". In this case you can work with "body" tag:
<body id="about">
but then you said "when you scroll to the about page" that means "a page with different section that you can use like this:
<p id="about"></p>
<p id="contact"></p>
or
<div id="about"></div >
<div id="contact"></div>
You should specify that the elements containing your targets are 100vh height. With your (original posted) code you can do it like that:
body > div {min-height:100vh;}
This css will catch the container-* div that you use in the code you provide. I recomand continue learning the basics. Start here https://developer.mozilla.org/he/docs/Web/HTML
Enjoy code!
If it's a same page scroller, you should add
#Portfolio,#about,#ContactMe {min-height:100vh;}
To your css.
If you can provide the exact code its much easier to help you.
simple code
$(document).ready(function(){
startFromtop=$(".start").position().top
aboutFromtop=$(".about").position().top
contactFromtop=$(".contact").position().top
endFromtop=$(".end").position().top-100
$(window).scroll(function(){
windowformtop=$(this).scrollTop();
if(windowformtop>=startFromtop && windowformtop<aboutFromtop){
$(document.body).css("background-color","white")
}
else if(windowformtop>=aboutFromtop && windowformtop<contactFromtop){
$(document.body).css("background-color","red")
}else if(windowformtop>=contactFromtop && windowformtop<endFromtop){
$(document.body).css("background-color","green")
}else if(windowformtop>=endFromtop){
$(document.body).css("background-color","blue")
}
})
})
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title></title>
<style type="text/css">
div{height:700px;border:2px solid red;}
</style>
</head>
<body>
<div class="start">Start</div>
<div class="about">ABOUT</div>
<div class="contact">CONTACT</div>
<div class="end">END PAGE</div>
</body>
</html>
Replace <body> with the <div> tag and add the appropriate css. The pages should have the same class but unique ids. You change the background color with CSS property background-color.
HTML:
<html>
<head></head>
<body>
<div class=“page”id=“portfolio”>
</div>
<div class=“page” id=“about”>
</div>
<div class=“page” id=“contactme”>
</div>
</body>
</html>
CSS:
.page{
position:relative;
width:100%;
height: auto;
margin:auto;
}
#portfolio{
background-color:white;
}
#about{
background-color:red;
}
#contactme{
background-color:blue;
}
Hope this works for you.
The sitemap of my page, I set it to click and show a second div (for more infos) when I preview the second div is already open and with the click closes and opens accordingly, I want the first time to display it, to be closed.
(The following example does not work, I do not know why, on m preview web it's ok)
<script>
$(document).ready(function(){
$("div.sitemapline").click(function(){
$("div.sitemapfooter").toggle();
});
});
</script>
.sitemapline {
width:100%;
border:solid #F00;
}
.sitemapline2 li {
display:inline-block;
text-align:center;
}
<!DOCTYPE HTML>
<html>
<head>
<title>sitemap footer</title>
</head>
<body>
<div class="sitemapline">
<div class="sitemapline2"><ul>
<li>Copyright ©.</li>
<li>Privacy Policy</li>
</ul>
</div> </div>
<div class="sitemapfooter">
<div>
<ul><h2>About Us</h2>
</ul>
</div>
</div>
`tthe first time to display it closed
You can add this code to the top of your script to hide it when the page opens.
$(".sitemapfooter").hide();
The best way is to use CSS as this will hide the element before the jQuery runs rather than once the DOM has loaded.
CSS
.sitemapfooter {
display: none;
}
Just set the inline style of the element to display: none, and then it will default to hidden on page load.
$(document).ready(function(){
$("div.sitemapline").click(function(){
$("div.sitemapfooter").toggle();
});
});
.sitemapline {
width:100%;
border:solid #F00;
}
.sitemapline2 li {
display:inline-block;
text-align:center;
}
<!DOCTYPE HTML>
<html>
<head>
<title>sitemap footer</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<div class="sitemapline">
<div class="sitemapline2"><ul>
<li>Copyright ©.</li>
<li>Privacy Policy</li>
</ul>
</div> </div>
<div class="sitemapfooter" style="display: none">
<div>
<ul><h2>About Us</h2>
</ul>
</div>
</div>
Just add display: none to the sitemapfooter div, it will be hidden at startup.
.sitemapfooter {
display: none;
}
If I understand your question correctly you want the second div hidden by default.
In order to make that happen you have to change your css code targeting the class "sitemapline2" and add a display style of none.
This will cause the div with the class "sitemapline2" not to show in the beginning, and when you click the jquery function will run to change the css style to display:block showing your info div.
I am new to programming and have a basic question. I have a background image on my web page, but I want the content area to have a white background. I see this very commonly on the web but being new I cannot seem to figure out how to do it. I have a #wrapper div that centers my content and a css rule to show the image, just can't get the content area background to be white. Help for this newbie is appreciated!
There are several ways to achieve this. You can either set the styles of your HTML tags (div, span, p etc...) by using the style attribute as in the example:
<div style="background-color: white;"></div>
or either define your styles inside the <head></head> tag as follows:
<html>
<head>
<style>
.your_class { background-color: #ffffff; }
</style>
</head>
<body>
<div class="your_class"></div>
</body>
</html>
or either use the link tag to put your CSS code inside a file and link to it as:
<head>
<link rel="stylesheet" type="text/css" href="your_file.css">
</head>
Or sometimes you will need to set your style dynamically. Then javascript enters into the picture:
<html>
<head>
<script>
function changeBg(id, color) {
document.getElementById(id).style.bgColor = color;
}
</script>
</head>
<body onload="changeBg('myDiv', 'white');">
<div id="myDiv"></div>
</body>
</html>
You should read more on HTML and CSS to understand how it works. There are plenty of tutorials on the web.
Assuming a structure like this :
<body>
<div id="wrapper">
<section id="content"> <!-- Or div or whatever -->
Lorem ipsum dolor sit amet
</section>
</div>
</body>
You should apply a background-color to #wrapper :
body{
background-image: url("your_url");
}
#wrapper{
background-color:white;
}
Check this fiddle for a working example.
Put your content inside a div and specify background:#fff; for that div in your CSS.