I'm trying to add javascript in html. But the javascript part didn't work. Here is my full html. Firstly I did it in jsfiddle. It works fine in jsfiddle. I just copy the code and put inside the code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Merhaba Dünya!</title>
<script>
var sum = 0;
$("#scroll li").each(function() {
sum += $(this).width() + parseInt($(this).css('paddingLeft')) + parseInt($(this).css('paddingRight'))
});
$("#scroll").css('width', sum);
$("#holder").mousemove(function(e) {
x = -(((e.pageX - $('#scroll').position().left) / $("#holder").width()) * ($("#scroll").width() + parseInt($("#scroll").css('paddingLeft')) + parseInt($("#scroll").css('paddingRight')) - $("#holder").width()));
$("#scroll").css({
'marginLeft': x + 'px'
});
y = -(((e.pageY - $('#scroll').position().left) / $("#holder").width()) * ($("#scroll").width() + parseInt($("#scroll").css('paddingTop')) + parseInt($("#scroll").css('paddingBottom')) - $("#holder").width()));
$("#scroll").css({
'marginTop': y + 'px'
});
});
</script>
<link rel="stylesheet" type="text/css" href="ornek.css" />
</head>
<body>
<div id="holder"><ul id="scroll">
<div class="si"></div>
<li><div class="si"></div></li><ul> <li><div class="si"></div></li><ul>
<li><div class="si"></div></li><ul>
</ul><div class="si"></div><div class="si"></div><div class="si"></div>
</ul></div>
</body>
</html>
Add your script at the end of the HTML or in a document.ready function.
You try to reach selectors which are not yet loaded.
Related
I've got following HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
var w = window.screen.width;
var h = window.screen.height;
var s = "Width: " + w + "px<br/>Height: " + h + "px";
document.body.innerHTML = s;
</script>
</body>
</html>
Using Pixel 2 with Chrome gives me result:
Width: 412px
Height: 732px
And with Firefox, I got result:
Width: 414px
Height: 688px
Why the result are not the same? It looks to me that Firefox has not correct dimensions.
The following code is a sample from w3schools.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("p").offset();
alert("Top: " + x.top + " Left: " + x.left);
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Return the offset coordinates of the p element</button>
</body>
</html>
it is possible to get offset right and offset bottom using jquery?
Link :
https://jsfiddle.net/0hhxdbk5/1/
var right = ($(window).width() - ($element.offset().left + $element.outerWidth()));
var bottom = $(window).height() - top - link.height();
This should do it.
If I want to include the margin when measuring the width of an element I may call element.outerWidth(true); However, I can't find a similar way to get the left offset of an element in a container, where the margin is included. element.position().left doesn't include margin.
I've tried element[0].getBoundingClientRect().left, and that works but is there a similar jquery call?
EDIT:
It seems that the native javascript call above doesn't give me the margin either..
This is a limitation of jQuery's .position(), which has this limitation:
Note: jQuery does not support getting the position coordinates of hidden elements or accounting for borders, margins, or padding set on the body element.
Recommended solution:
var position = $element.position();
x = position.left + parseInt($element.css('marginLeft'), 10);
y = position.top + parseInt($element.css('marginTop'), 10);
Use Jquery offset() function
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>offset demo</title>
<style>
p {
margin-left: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $( "p:last" );
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
</script>
</body>
</html>
I am learning JavaScript and am using the following code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>javascript learning</title>
<script type="text/javascript">
function resizeRock() {
document.getElementById("rockImage").style.height = (document.body.clientHeight - 100) * 0.5;
}
</script>
</head>
<body onload="resizeRock();">
<!--ROCK-->
<div id="image">
<img src="http://outdoordesignbylucas.files.wordpress.com/2011/01/1-10-11-triangular-rock.jpg" id="rockImage" onclick="touchRock();" style="cursor: pointer;" />
</div>
</body>
</html>
This code is not resizing the image, however the following code is working as expected:
<html>
<head>
<title>iRock - The Virtual Pet Rock</title>
<script type="text/javascript">
function resizeRock() {
document.getElementById("rockImage").style.height = (document.body.clientHeight - 100) * 0.5;
}
</script>
</head>
<body onload="resizeRock();">
<div style="margin-top:100px; text-align:center">
<img id="rockImage" src="http://outdoordesignbylucas.files.wordpress.com/2011/01/1-10-11-triangular-rock.jpg" alt="iRock" style="cursor:pointer" onclick="touchRock();" />
</div>
</body>
</html>
I am breaking my head over this. The code is the same, the top (not working) is what I wrote - the bottom is from a book. What am I missing?
You need to give your style a unit.
Change this line:
document.getElementById("rockImage").style.height = (document.body.clientHeight - 100) * 0.5;
To this:
document.getElementById("rockImage").style.height = ((document.body.clientHeight - 100) * 0.5) + 'px';
Thiss will tell the browser that you are setting the height in px, instead of percent, pt, em, etc.
jsFiddle / Full Screen Result
The problem is with the DOCTYPE
<!DOCTYPE html>
This put your document into standard mode. Add this css:
html
{
height: 100%
}
body
{
height: 100%
}
Adding "px" to the end of the statement will solve the problem because in standard mode you need to state the unit explicitly.
Alternatively you can delete <!DOCTYPE html>
i want to hid and show the div tag of my jsp page from parent window and also i dont want use open window.open() if i m using that than getting the reference of child window and then i m executing the java script function of child window this solution causing me a problem cause window is loaded first than executed the java script function taking some time to hid div tag or some time its reveal every div tag
so plz tell me the other solution or manipulate my logic so that i can show and hid div tag from parent window very smoothly. My requirement is not to open a new window but open a new tab in which all div tag is present according the home page button click div tag is showed
this is my logic of java script
function showDiv(id) {
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
// Check what the value of the button pressed and displays the correct div
if (id == 1)
div1.style.display = 'block';
if (id == 2) {
div2.style.display = 'block';
}
if (id == 3) {
div3.style.display = 'block';
}
}
this is child jsp
<script type="text/javascript">
function showDiv(id) {
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
// Check what the value of the button pressed and displays the correct div
if (id == 1)
div1.style.display = 'block';
if (id == 2) {
div2.style.display = 'block';
}
if (id == 3) {
div3.style.display = 'block';
}
}
function doAllThese(url) {
if (url == 'FindById') {
document.form.action = "/EmployeeWebSpring/search/FindById";
self.close();
}
if (url == 'FindByName') {
document.form.action = "/EmployeeWebSpring/search/FindByName";
}
if (url == 'FindByDeptNO') {
document.form.action = "/EmployeeWebSpring/search/FindByDeptNO";
}
}
</script>
</head>
<body>
<form:form name="form" commandName="employeeForm" method="post">
<div id="div1" style="display: block;">
Employee_ID:
<form:input path="employeeNumber" />
<input type="submit" name="method" value="FindById" id="FindById"
onclick="doAllThese(this.value)" />
</div>
<div id="div2" style="display: none;">
Employee_Name
<form:input path="firstName" />
<input type="submit" name="method" value="FindByName"
onclick="doAllThese(this.value)" /> <br />
<font size=3>For Searching the employees by<b>Employee
Name</b><br />you can use % match all the records with the given
pattern
</font><br /> <font size="2"> <i>e.g <b> for search by</b>EmployeeName<br />
matches alL the employees whose name starts with character <b>S</b></i></font>
</div>
<div id="div3" style="display: none;">
Employee_Name
<form:input path="departmentId" />
<input type="submit" name="method" value="FindByDeptNO"
onclick="doAllThese(this.value)" />
</div>
</form:form>
</body>
</html>
and this is my home.jsp
<%#page import="java.util.List"%>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="../css/styles.css" rel="stylesheet" type="text/css">
<title>Home</title>
<script type="text/javascript">
function LoadByName(windowHeight, windowWidth) {
var centerWidth = (window.screen.width - windowWidth) / 2;
var centerHeight = (window.screen.height - windowHeight) / 2;
var newWindow = window.open('../search/searchPage', 'mywindow',
'resizable=0,width=' + windowWidth + ',height=' + windowHeight
+ ',left=' + centerWidth + ',top=' + centerHeight);
alert("Name window");
newWindow.showDiv(2);
}
function LoadById(windowHeight, windowWidth) {
var centerWidth = (window.screen.width - windowWidth) / 2;
var centerHeight = (window.screen.height - windowHeight) / 2;
var newWindow = window.open('../search/searchPage', 'mywindow',
'resizable=0,width=' + windowWidth + ',height=' + windowHeight
+ ',left=' + centerWidth + ',top=' + centerHeight);
alert(newWindow);
newWindow.showDiv(1);
}
function LoadByDeptNo(windowHeight, windowWidth)
{
var centerWidth = (window.screen.width - windowWidth) / 2;
var centerHeight = (window.screen.height - windowHeight) / 2;
var newWindow = window.open('../search/searchPage', 'mywindow',
'resizable=0,width=' + windowWidth + ',height=' + windowHeight
+ ',left=' + centerWidth + ',top=' + centerHeight);
alert(newWindow);
newWindow.showDiv(3);
}
</script>
</head>
<jsp:include page="Header.jsp"/>
<p> </p>
<br>
<br>
<body>
</body>
</html>
and this is header.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="../css/styles.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<img src="../images/Header.png" width="1250" height="120" />
<div id='cssmenu'>
<ul>
<li class='active '><a href='index.html'><span>Home</span></a></li>
<li class='has-sub '><a href='#'><span>NewEntity</span></a>
<ul>
<li><a href='#'><span>Department</span></a></li>
<li><a href='#'><span>Employee</span></a></li>
<li><a href='#'><span>Project</span></a></li>
</ul></li>
<li class='has-sub '><a href='#'><span>FindEmployee</span></a>
<ul>
<li><span>FindEmployeeById</span></li>
<li><span>FindEmployeeByName</span></li>
<li><a href=' javascript:LoadByDeptNo(250,250)'><span>FindByDepartmentId</span></a></li>
<li><span>GetAllEmployee</span></li>
</ul></li>
<li class='has-sub '><a href='#'><span>FindDepartment</span></a>
<ul>
<li><span>FindDepartmentById</span></li>
<li><span>FindDepartmentByName</span></li>
<li><span>GetAllDepartment</span></li>
</ul></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</body>
</html>
Currently, your code is reloading the page every time your LoadById or LoadByName functions is called, because it's doing this:
var newWindow = window.open('../search/searchPage', 'mywindow', ...);
Instead, have your functions share the newWindow variable and only call window.open if newWindow is null, like this:
var newWindow = null;
function LoadByName(windowHeight, windowWidth) {
if (!newWindow) {
var centerWidth = (window.screen.width - windowWidth) / 2;
var centerHeight = (window.screen.height - windowHeight) / 2;
newWindow = window.open('../search/searchPage', 'mywindow',
'resizable=0,width=' + windowWidth + ',height=' + windowHeight
+ ',left=' + centerWidth + ',top=' + centerHeight);
alert("Name window");
}
newWindow.showDiv(2);
}
function LoadById(windowHeight, windowWidth) {
if (!newWindow) {
var centerWidth = (window.screen.width - windowWidth) / 2;
var centerHeight = (window.screen.height - windowHeight) / 2;
newWindow = window.open('../search/searchPage', 'mywindow',
'resizable=0,width=' + windowWidth + ',height=' + windowHeight;
}
}
Then you can call newWindow.showDiv and newWindow.hideDev as necessary, without reloading the window contents every time. Unfortunately, with your code as it currently is (the handlers being called by old-style javascript: links), newWindow ends up being a global variable (as your functions are). You might look into hooking up those handlers in a more modern way, or at least restricting yourself to just the one global variable (an object the other things are properties of).
Of course, if you want to reload the window contents every time (refreshing or changing the search), then to ensure only the correct divs are shown, pass a query string parameter to the jsp and have the jsp output the divs with the appropriate visibility. Or you could only load the window once, but use ajax to update/change the search results.