How to include stylesheet file only for one div? - javascript

i have to include a css file for only one div and to include another css file for second div. How can we do this?
i have tried Switch cases for this, but when it loads css for one case it is still showing the css effect in other case also.
here is what i have tried so far:
<?php
switch ($type_show1):
case 'welcome1':
//default:
?>
<link href="css/main.css" rel="stylesheet" type="text/css" /> // css to include
<div class="page-header">
<div class="page-title">
<h5>Booking Management</h5>
<span>Good morning, Admin!</span>
</div>
</div>
<!-- /page header -->
<?php
break;
endswitch;
?>
<?php
switch ($type_show2):
case 'welcome2':
//default:
?>
<!--<link href="css/main.css" rel="stylesheet" type="text/css" />--> // css not to include
<div class="page-header">
<div class="page-title">
<h5>Booking Management</h5>
<span>Good morning, Admin!</span>
</div>
</div>
<?php
break;
endswitch;
?>
Any Help :)

Whenever you add a css file to the page, it applies to the whole document. However looking at your code, what I think you're trying to do is display 1 chunk of html under one condition and another chunk under a separate condition. To do this change your code to this:
<?php
switch ($type_show1):
case 'welcome1':
//default:
?>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<?php
break;
case 'welcome2' :
?>
<link href="css/main2.css" rel="stylesheet" type="text/css"/>
<?php
break;
?>
<div class="page-header">
<div class="page-title">
<h5>Booking Management</h5>
<span>Good morning, Admin!</span>
</div>
</div>
<!-- /page header -->
Speaking to what you actually said about using one stylesheet per element. It is possible using Web Components, http://webcomponents.org/, and shadow DOM, http://webcomponents.org/articles/introduction-to-shadow-dom/, but I think in your situation it would be best to simply give each div an id or a class and apply the css specifically to that id or class from one css stylesheet.
UPDATE
To apply CSS to two different divs do this:
HTML
<html>
<head>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page-header" id="div1">
<div class="page-title">
<h5>Booking Management</h5>
<span>Good morning, Admin!</span>
</div>
</div>
<div class="page-header" id="div2">
<div class="page-title">
<h5>Booking Management</h5>
<span>Good morning, Admin!</span>
</div>
</div>
</body>
</html>
CSS (main.css)
#div1 {
//Some CSS Styles to apply to the first div
}
#div2 {
//Some CSS Styles to apply to the second div
}

Nope, you can't use a StyleSheet for just one div
create a new div and use your special CSS for that div.

Related

adding CDN links for javascript in laravel blade

i tested some javascript code without any variables and loops and it worked fine. it only used `
<link rel="stylesheet" type="text/css" href="css/lightbox.min.css">`
<script src="lightbox-plus-jquery.min.js" type="text/javascript"></script>
which i got from cdn and the html only had this
html for pop image
<div class="gallery">
</div>
what i need is to apply it on this code
html in laravel
#foreach($posts as $post)
...................
<div class="gallery">
<div>
.....................
#endforeach
You will want to place the CDN links at the bottom of your body element. This ensures that they wont hold up the rendering of other elements on your page.
...
<link rel="stylesheet" type="text/css" href="css/lightbox.min.css">`
<script src="lightbox-plus-jquery.min.js" type="text/javascript"></script>
</body>
Additionally, you'll want to move the <div class="gallery"> OUTSIDE of the loop otherwise you'll wrap each image up in the gallery wrapper.
Here's how you should do it:
Note I also changed the image id attribute to a class as ids need to be unique.
<div class="gallery">
#foreach($posts as $post)
<a href="/storage/{{$post->image}}" data-lightbox='lo'>
<img src="/storage/{{$post->image}}" class="img-posts" alt="">
</a>
#endforeach
</div>

javascript code inside php is not able to access the html element. document.getElementById is not working

document.getElementById("n") in the script inside php is not able to access the paragraph with id="n" in html.
The inner html of the paragraph is not being changed.
I also tried with jQuery but it was not able to change the innerHTML either.
<?php
$username="root";
$password="";
$servername="localhost";
$database="mydb";
$conn=mysqli_connect($servername,$username,$password,$database);
if(!($conn)){
die(mysqli_connect_error());
}
$sql="select passenger from place where source='chennai' and destination='bengaluru'";
$result=mysqli_query($conn,$sql);
if(mysqli_num_rows($result)>0){
echo '<script>document.getElementById("n").innerHTML="Do Something";</script>';
}
mysqli_close($conn);
?>
<html>
<head lang="en-us">
<title>Cards</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/materialize.min.js"></script>
<script src="jquery-1.11.3.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="demo_css.css">
</head>
<body>
<p id="n"></p>
<div class="container" id="con">
<div class="card hoverable">
<div class="card-content waves-effect waves-block waves-light">
<h1 class="card-title activator grey-text text-darken-4" id="content"></h1>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Passengers<i class="material-icons right">close</i></span>
</div>
</div>
</div>
</body>
</html>
The reason for document.getElementById('n') returning nothing is, that it's executed before the rest of the html (including the element you are trying to get) is loaded.
So you got several options:
Place your javascript underneath the html (best before the closing </html>).
That way it will be executed after element is loaded into the DOM.
Use a function that fires when the DOM is loaded and place your js code in there.
2.1. One way to do that is to use jQuery's $(document).ready():
$(document).ready(function() {
document.getElementById("n").innerHTML="Do Something";
}
2.2. Some vanilla JS ways are described in that SO-Post:
pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

name conflict between popbox.css and bootstrap.css

I noticed that there is a problem if both popbox.css and bootstrap.css are used. Does anybody know a solution for that?
Here is a fiddle from somebody to show how popbox works.
http://jsfiddle.net/kbwood/sV4bY/
If you load the bootstrap library additional to the popbox libraries
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
it will not work anymore.
Here is a not working example. Remove the bootstrap.min.css file to make it work
<!DOCTYPE html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>PopBox</title>
<link href="../static/css/popbox.css" type="text/css" rel="stylesheet" media="screen" charset="utf-8">
</head>
<body>
<div class="container">
<h1>PopBox</h1>
<div class='popbox'>
<a class='open' href='#'>
<img src='' style='width:14px;position:relative;'> Click Here!
</a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
Content from first popup
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../static/js/popbox.js" type="text/javascript" charset="utf-8"></script>
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript'>
$(document).ready(function(){
$('.popbox').popbox();
});
</script>
The problem is due to the collapse class you have applied to the div. In Bootstrap, these are hidden by default as it's part of the accordion feature. Either remove the class from that div or use a different name for it.
Example: http://jsfiddle.net/tpjjsqg6/

Bootstrap scaffolding limitations

I am trying to use bootstrap scaffold for first time and wonder if I can do that.
<header class="row"></header> // this covers browsers width
<div id="main-container" style="maring:auto; max-width:1200px"> I want this to be centered and not more than 1200px
<div class="row" class="span12" id="main">
</div>
</div>
The idea is that I want to use the scaffolding feature in different areas inside my html document independently, can I do it or I am forced to go on a whole page perspective ?
Well.. the first thing you're going to want is to start with this:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You do not have to do the entire page, you only put it around whatever you want.
<!-- The container is necessary for your rows -->
<div class="container">
<!-- Each row will hold a row of 'spans' -->
<div class="row">
<!-- This will center whatever content you want. -->
<div class="offset2 span8">
</div>
</div>
</div>

Simple Modal and Javascript Call

I created a Simply Modal popup dialog which works fine if you click on
<a href='#' class='confirm'>Demo</a>
however how can I call this "confirm" css class from within Javascript. I have tried...
<script language="JavaScript" type="text/JavaScript">
$(".confirm").click();
** Also tried this to but no good... **
document.getElementsByTagName('body')[0].className = 'confirm';
</script>
But didn't work. I'm sure this is pretty easy to do but can't seem to get it.
Thanks,
Frank G.
*** HERE IS THE SCRIPT I AM USING ***********
SimpleModal Confirm Modal Dialog
<!-- Page styles -->
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<!-- Confirm CSS files -->
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<!-- JS files are loaded at the bottom of the page -->
</head>
<body>
<div id='container'>
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='confirm-dialog'>
<h3>Confirm Override</h3>
<p>A modal dialog override of the JavaScript confirm function. Demonstrates the use of the <code>onShow</code> callback as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.</p>
<input type='button' name='confirm' class='confirm' value='Demo'/> or <a href='#' class='confirm'>Demo</a>
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Confirm 123</span></div>
<div class='message'></div>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/confirm/header.gif' alt='' />
<img src='img/confirm/button.gif' alt='' />
</div>
</div>
</div>
<!-- Load JavaScript files -->
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/confirm.js'></script>
<script type="text/javascript">
$('.confirm').dialog({modal:true});
$('.confirm').modal();
$(".confirm").click();
$(document).ready(function(){
$('.confirm').dialog({modal:true});
$('.confirm').modal();
$(".confirm").click();
});​
</script>
</body>
</html>
maybe you can try this jquery solution:
$("style[type=text/css]").text('#import url("*.css");');
To call it on page load simply call it inside document ready
$(document).ready(function(){
$('#modal_div_id').modal(); // Id would be better (#confirm)
});​
This will call it at the page load. Make sure you have only one class at the page named as confirm.
Documentation.
A fiddle here.

Categories