How to access class name by javaScript - javascript

I want to access class"pdocCover" for set width and height of body by javaScript . How should I do?.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by PubliForge, $Date: 2012/02/03 12:17:54 $ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="en"/>
<title>Couverture</title>
<link rel="StyleSheet" href="Css/reset.css" type="text/css"/>
<link rel="StyleSheet" href="Css/publidoc.css" type="text/css"/>
<link rel="StyleSheet" href="Css/main.css" type="text/css"/>
</head>
<body class="pdocCover">
<div>
<img src="Images/9782919504060.png" alt="Couverture"/>
</div>
</body>
</html>

By using jQuery
$(".pdocCover").css("height","500px");
$(".pdocCover").css("width","500px");
By using JavaScript
document.getElementsByClassName('pdocCover').style.height="500px;"
document.getElementsByClassName('pdocCover').style.width="500px;"

To achieve what you specifically described:
document.getElementsByClassName('pdocCover')[0].width = '100px'
... but that probably isn't what you want. For one you can access the body more quickly and clearly by doing:
document.getElementsByTagName('body')[0]
and this will not change the width or height of the window itself if that is what you are attempting to do. Unless you create a new window with window.open you do not have control of the window size.

document.getElementByClassName("Classname") should return array of object who have class "classname". choose your one by selecting the index: [0] the first element, [1] the second etc.

Related

Integrate widget in existing html without css conflict

I have to integrate widget html file in a existing html page but i am getting many css issue after this. Is there any way that i can restrict css files of main html not to apply on widget html file.
**Sample html :**
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class="csstransforms" lang="ru" >
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="abc.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="abc.js" type="text/javascript"></script>
</head>
<body>
<!-- WIDGET CODE-->
<!DOCTYPE html>
<html lang="en" ng-app="adidas" bb-api-url="https://adidas-dev.bookingbug.com">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="def.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="defjs" type="text/javascript"></script>
</head>
<body>
.......widget html code
</body>
</html>
<body>
</html>
With HTML you are not allowed to have two HTML documents in a single file.
One approach to solve this is by using an iframe in your main HTML:
<iframe src="widget.html"></iframe>
So you create your widget in its own HTML file with its own styles and javascript scripts, and embed it in your main HTML file using the iframe (then your widget is completely isolated from your main HTML scripts and styles and not be affected by them).
Another approach will be to create a separate CSS for you widget and include it in your main HTML, then insert your widget's markup only (without the html and body tags) in your main HTML body.
In your widget CSS file you should create a "namespace" for you widget's style that will not collide with the rest of your CSS by doing something like this:
.my-widget-name {
// your widget styles
}
.my-widget-name span.name {
// your widget style
}
.my-widget-name .box {
// your widget style
}
.......
.......
(I usually like to use something like LESS, but shown above is a traditional CSS example)
"my-widget-name" should be a unique class name that only your widget is using, and by sub-classing all of your widget styles under this class name, you are basically isolating it from the rest of your CSS.
Hope it helps a bit

Jquery jqte and document ready

I've tried many different places for the script with $('#editable').jqte(); inside.
Sometimes the editor shows up, sometime it does not, it seems non-deterministic.
It's like my document is not ready when I call the jqte() function.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Parcours, technique, sujets, peinture figurative, couleurs, émotion." />
<title>Creating Page</title>
<link href="/bundles/usersite/css/homepage.css" type="text/css" rel="stylesheet" />
<script src="/bundles/usersite/js/jquery.js" type="text/javascript"></script>
<link href="/bundles/usersite/css/jquery-te.css" type="text/css" rel="stylesheet" />
<script>
$(document).ready
(
function()
{
$('#editable').jqte();
}
);
</script>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="mainContent">
<div id="editable">
</div>
</div>
</div>
</body>
</html>
EDIT:
Due to my twig template the below is missing in some cases (like the above one):
<script src="{{ asset('bundles/usersite/js/jquery-te.js') }}" type="text/javascript"></script>
works better with javascript linked !!!!!!

jquery.min.js Failed to load resource

Why this link doesn`t work?
//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="Description" content=" [wstaw tu opis strony] ">
<meta name="Keywords" content=" [wstaw tu slowa kluczowe] ">
<meta name="Author" content=" [dane autora] ">
<title>[tytuł strony] </title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".animat_kon").click(function () {
$(".animat_text").slideToggle("slow");
});
});
</script>
</head>
error example:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
you did not included http://
whenever you are downloading from the server directly then usehttp://
Change
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
into
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
You missed the http:. You can skip the http: to let your browser automatically choose between HTTPS and HTTP. But in your case the debugging tool seems not to understand this syntax.
Find more information here: Can I change all my http:// links to just //?
The link must start with http://
Please change your script src to:
<link rel="stylesheet" href="style.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
script src should start with http://

Document.write link tag

I don't understand that error when validating my document:
Line 14, Column 91: document type does not allow element "link" here
…e (' <link rel="stylesheet" type="text/css" href="1400.css" media="screen" />');
✉
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).
One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
the code was:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>Portfolio</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<link id="disabled" type="text/css" rel="stylesheet" href="disabled.css" media="screen"/>
<script type="text/javascript">
document.write(' <link rel="stylesheet" type="text/css" href="1400.css" media="screen"/>');
document.write('<link rel="stylesheet" type="text/css" href="1024.css" media="screen"/>');
document.write(' <link rel="stylesheet" type="text/css" href="320.css" media="screen"/>');
document.write(' <link rel="stylesheet" type="text/css" href="Ipad.css" media="screen"/>');
</script>
<!--[if IE]>
<link rel="stylesheet" href="IE.css" media="screen"/>
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" href="disabled.css" media="screen"/>
<![endif]-->
<link rel="shortcut icon" href="images/favicon.png" />
</head>
<body>
What I want to know is how to fix that probleme cause I proceed this way for graceful degradation(users who have JS disabled)
Your document is being parsed as strict XML.
The XML parser sees the <link /> tag inside the Javascript string and complains that <link>s cannot be nested inside of <script>s.

Perl WWW::Scripter, calling javascript from .js file

The main html file contains following javascript source
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Hello Worlds</title>
<link rel="stylesheet" href="css/main_page.css" type="text/css"/>
<link rel="stylesheet" href="css/page_content.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/main_page.js"></script>
<script type="text/javascript" src="js/page_content.js"></script>
<script type="text/javascript" src="js/configurator.js"></script>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
one of the form's post called a javascript function which belongs to page_content.js file.
I am trying to inovke the function using following
$scripter->get('javascript:submitForm()');
but it's not working. Please help me how can I call the function which belongs to the page_content.js file.
If the html page (with address stored in $url) contains (internally or externally) JavaScript that define function/procedure submitForm() then you can execute it by the following code:
use WWW::Scripter;
$w = new WWW::Scripter;
$w->use_plugin('JavaScript');
$w->get($url);
$w->eval('submitForm();');
For more information see WWW::Scripter documentation.

Categories