on my Magento 1.6.2.0 front page I am getting /**/ at the top of my page. Seems to be before the page content load at http://nilandsplace.com. I can see it in firebug, but have no way to know where it comes from. Firebug shows
<head>
<body class=" ig-404tosearch-index-index cms-home" style="position: relative; min-height: 100%; top: 0px;">
<span id="BuySafeSealSpan" style="display: inline; padding: 0px; margin: 0px; border: 0px none; position: fixed; bottom: 0px; top: auto; right: auto; left: 0px; z-index: 10001; background-color: transparent; height: auto; width: auto;">
/*
<script type="text/javascript">
*/
<meta content="EB5B8B2562CC109C0058726E01C0AFC1" name="msvalidate.01">
<meta content="azPLjb6T1pIRdUuZPmIGr7HV3p982Yaa1TGQKOjMe0E" name="google-site-verification">
<script type="text/javascript">
But it should look like this
<head>
<body class=" ig-404tosearch-index-index cms-home" style="position: relative; min-height: 100%; top: 0px;">
<span id="BuySafeSealSpan" style="display: inline; padding: 0px; margin: 0px; border: 0px none; position: fixed; bottom: 0px; top: auto; right: auto; left: 0px; z-index: 10001; background-color: transparent; height: auto; width: auto;">
<div style="display:none;">
<div id="livezilla_tracking" style="display:none">
<script type="text/javascript">
<noscript><img src="http://chat.nilandsplace.com/server.php?request=track&output=nojcrpt&fbpos=12&fbml=0&fbmt=0&fbmr=0&fbmb=0&fbw=32&fbh=112" width="0" height="0" style="visibility:hidden;" alt=""></noscript>
<script type="text/javascript">
<script src="https://stat.dealtime.com/ROI/ROI2.js" type="text/javascript">
<div class="wrapper">
The class=" ig-404tosearch-index-index cms-home" should be between the
<body></body>
tags and the
and what follows should be between
<head></head>
tags
Some how in removing and old Google translate script in my template files I introduced the
/*
<script type="text/javascript">
*/
But I can't find it. I have used file comparison to my local back up copy and can't find the Dif file difference. I have a local Apache2 server on my home computer with all the same setup. but my localhost does not have the load error?
I have been through Magento: /app, /core, /default (template files), /design, /js, /lib, /modules, /include and /skin and I am running out of files. I don't save /var/cache or session to files. I have cleared APC and eAccelerator and swapped in my online database to localhost and not found the error.
Related
I am trying to create this page where I have different div and buttons that are scattered on the page and connecting them using jquery connections by musclesoft
I have tried this code but it seems that the connection isn't happening at all, I can't figure out what the issue is?
button {
min-width: 120px;
height: 120px;
background: #f56c29;
border-radius: 60px;
}
connection {
border: 30px solid #b51c29;
border-radius: 50px;
}
button.about {
position: absolute;
transition: .5s ease;
top: 50%;
left: 50%;
}
<!DOCTYPE html>
<html lang="en" >
<!-- Include jQuery and the Connections plugin -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.connections.js"></script>
<!-- Connect your elements like in this example -->
<script>
jQuery(document).ready(function() {
$('div').connections();
});
</script>
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by rasbsal</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div>
<button>
Text
</button>
</div>
<div>
<button class="about">
About
</button>
</div>
</body>
</html>
The connections are not visible because there's actually no space between the div elements (go to Inspect Element in Dev Tools and see for yourself highlighting the two DIV elements).
Use button as your connecting selector
jQuery(($) => {
$('button').connections();
});
button {
min-width: 120px;
height: 120px;
background: #f56c29;
border-radius: 60px;
}
connection {
border: 30px solid #b51c29;
border-radius: 50px;
}
button.about {
position: absolute;
transition: .5s ease;
top: 50%;
left: 50%;
}
<div>
<button>Text</button>
</div>
<div>
<button class="about">About</button>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/musclesoft/jquery-connections#1.0.1/jquery.connections.js"></script>
I (newbie in MVC) added a preloader with jquery in the layout page, which should be loaded on every page load in MVC.
The problem is it fires only on the login page, but does not fires on the subsequent pages. Is there any way to make it generic ?
......................
<script type="text/javascript">
$(window).load(function () {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});
</script>
<style type="text/css">
.no-js #loader
{
display: none;
}
.js #loader
{
display: block;
position: absolute;
left: 100px;
top: 0;
}
.se-pre-con
{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(images/Preloader_3.gif) center no-repeat #fff;
}
</style>
</head>
<body>
<div id="wrapper">
#Html.Action("Navbar", "Navbar", new { controller = ViewContext.RouteData.Values["Controller"].ToString(), action = ViewContext.RouteData.Values["Action"].ToString() })
<div id="page-wrapper">
<div id="main">
<div class="ptcontainer">
<div id="loader" class="se-pre-con"></div>
#RenderBody()
</div>
<div id="footer">
</div>
</div>
</div>
</div>
Thanks in Advance!
You code is correct but you need to but slash to the background url image
background: url(/images/Preloader_3.gif) center no-repeat #fff;
This question already has answers here:
Jquery not loading in head but loading on bottom of body tag
(5 answers)
Closed 7 years ago.
hello my javascript code is not working i included the css and the script in the code i don't have good experience in javascript maybe there is something missing i need some help here thanks in advance
<html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
"use strict";
$("button").click(function () {
$(".popup").fadeIn();
});
$("span").click(function () {
$(".popup").fadeOut()
});
});
</script>
<h1>Hello world ! </h1>
<button>click</button>
<div class="popup">
<div class="overlay"> sheko </div>
<div class="box">
<span>X</span>
<div>
</div>
</body>
<head>
<style>
.popup{
z-index: 999;
display: none;
}
.overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.90);
position: absolute;
top: 0;
left: 0;
}
.box{
width: 250px;
height: 100px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box span{
float: right;
margin: 10px;
cursor: pointer;
}
</style>
</head>
</html>
its working already.
<html>
<head>
<style>
.popup{
z-index: 999;
display: none;
}
.overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.90);
position: absolute;
top: 0;
left: 0;
}
.box{
width: 250px;
height: 100px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box span{
float: right;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
"use strict";
$("button").click(function () {
$(".popup").fadeIn();
});
$("span").click(function () {
$(".popup").fadeOut()
});
});
</script>
<h1>Hello world ! </h1>
<button>click</button>
<div class="popup">
<div class="overlay"> sheko </div>
<div class="box">
<span>X</span>
<div>
</div>
</body>
</html>
The order of your HTML is totally incorrect, you have the <head></head> tag below the <body></body>.
Place the head tag above the body, just after the opening html tag then move your css and the link to jQuery in this section.
Finally it's better to add your JS at the very bottom of the page as the browser reads the dom from top to bottom, thus will increase the speed of the page load.
<html>
<head>
<style>
.popup{
z-index: 999;
display: none;
}
.overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.90);
position: absolute;
top: 0;
left: 0;
}
.box{
width: 250px;
height: 100px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box span{
float: right;
margin: 10px;
cursor: pointer;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<h1>Hello world ! </h1>
<button>click</button>
<div class="popup">
<div class="overlay"> sheko </div>
<div class="box">
<span>X</span>
<div>
</div>
<script type='text/javascript'>
$(function() {
"use strict";
$("button").click(function () {
$(".popup").fadeIn();
});
$("span").click(function () {
$(".popup").fadeOut()
});
});
</script>
</body>
You have multiple errors.
First the css in <style></style> tag must be in your <head></head> of your page.
Best solution is using external css file and add him with a <link> in your <head>.
After that the <script> section is highly better on the bottom of your page because the browser compile in order of your code.
If you want add <script> before html add your script in this function :
$(document).ready(function(){
// Here
});
write the jS code in a .js file and use
<script src="foo/bar/yourScript.js"></script>
the style sheet in an .css and use a
<link rel="stylesheet" href="css/bar/yourStyle.css">
so the Script-tag is always at the Bottom of the body-element
the head is above the body and the link-tag inside the head
Here is suggestion that please maintain the flow of code.
write the css Style in head tag and jquery or JavaScript after body tag completed.
Here is jsfiddle link
https://jsfiddle.net/nbcakhzz/2/
Hope it will help you.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I got a fiddle http://jsfiddle.net/HEue6/1/ that looks good for a start and now I want it to look and feel more like Office 365. I think the font in Office 365 is Segoe UI Semilight but I'm not sure. In the meantime we've used the Google font Raleway but another font that was mentioned is also called Futura. Now I would like to add the effect that also Office 365 has, that a grey rectangular box marks the selected area.
Can you help me? Do you think that the correct font is chosen or can it get more similar to Office 365? How should I add the grey rectangle for a chosen element?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>-Register</title>
<script src="/scripts/jquery/jquery-1.9.1.js" type="text/javascript"></script>
<script src="/scripts/application.js" type="text/javascript"></script>
<link href="/css/style.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,200" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<div id="header-title">Account Administration</div>
</div>
<hr />
<div id="navigation-bar">
<div id="navigation-content">
<!-- SINGLE BUTTON MODULE --> <a href="/admin/adduser">
<div class="navigation-button">
<div class="navigation-header">Add new account</div>
<div class="navigation-desc">Add new user account</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<a href="/admin/search"><div class="navigation-button">
<div class="navigation-header">Search account</div>
<div class="navigation-desc">Search and manage accounts</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<a href="/admin/export"><div class="navigation-button">
<div class="navigation-header">Export</div>
<div class="navigation-desc">Export to Excel and other formats</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<form id="inputForm" role="form" class="marg-left" action="/admin/import" method="post" enctype="multipart/form-data">
<input id="upload" name="file" type="file" onchange="this.form.submit();"/><a href="" id="upload_link"><div class="navigation-button">
<div class="navigation-header">Import</div>
<div class="navigation-desc">Import from tab-separated files on disk</div>
</div> </a>
</form>
<!-- SINGLE BUTTON MODULE -->
<a href="/admin/setup"> <div class="navigation-button">
<div class="navigation-header">Setup</div>
<div class="navigation-desc">Setup global parameters</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<a href="j_spring_security_logout"><div class="navigation-button" id="logga">
<div class="navigation-header">Logout</div>
<div class="navigation-desc">Exit account administration</div>
</div></a>
</div>
</div>
</div>
</body>
</html>
Its a very quick and dirty implementation, but change your CSS to:
FIDDLE
body {
font-family:'Raleway', sans-serif;
}
#header {
width: 100%;
position: fixed;
height: 45px;
border-bottom: solid 2px #0072c9;
background-color: #FFFFFF;
z-index: 30;
}
#header-title {
left: 250px;
font-size: 22px;
bottom: 7px;
color: #0072c9;
font-weight: 400;
position: absolute;
}
#navigation-bar {
width: 230px;
height: 100%;
box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.2);
z-index: 20;
position: absolute;
}
#navigation-content {
width: 100%;
height: auto;
position: absolute;
top: 47px;
}
.navigation-button {
position: relative;
width: 100%;
height: 80px;
margin: 15px 0px;
}
.navigation-header {
position: absolute;
top: 15px;
left: 10px;
color: #0072c9;
font-size: 25px;
}
.navigation-desc {
position: absolute;
bottom: 15px;
left: 10px;
font-size: 12px;
color: #0072c9;
}
#logout {
border-top: solid 2px #0072c9;
}
#navigation-content a:hover div.navigation-button {
background:lightgrey;
}
#navigation-content a:hover div.navigation-button:before {
content:' ';
display:block;
position:absolute;
right:-20px;
top:15px;
height:30px;
width:30px;
background:white;
-webkit-transform-origin: 5px 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
I've been having some trouble getting JQuery UI selectable to work with my site. I'm still very new to coding and I'm not sure what I'm doing wrong. I've searched for relevant questions and haven't been able to find any that let me figure it out.
I'm trying to create whats essentially a glorified label maker for work, and would like to be able to select cells in a grid using a mouse "lasso." But for some reason, I can't get selectable to work at all.
Here is the js:
$('document').ready(function() {
for (i=0; i<117;i++) {
$('#plateActual').append('<div class="cell"/>');
}
$('#plateActual').selectable();
});
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css" />
<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="navbar">
</div>
<div id="controlPanel">
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
</div>
<div id="plateEditor">
<div id="plateActual">
</div>
</div>
<div id="bottom">
</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</body>
Here is the CSS:
body {
margin: 0px auto;
padding: 0;
}
p {
color: yellow;
}
#wrapper {
border: 1px dotted black;
width: 980px;
margin: 0px auto;
padding: 0;
}
#navbar {
width: 980px;
background: black;
height: 50px;
position: fixed;
margin: 0;
padding: 0;
top: -10px;
}
#controlPanel {
width: 250px;
background-color: red;
float:left;
top: 100px;
margin-bottom: 0;
}
#plateEditor {
position: relative;
overflow: auto;
width: 730px;
float:right;
top: 100px;
margin-bottom: 0;
margin-top: 150px;
}
#plateActual {
border: 1px solid;
width: 403px;
height: 279px;
margin: 0px auto;
pading: 0;
}
#bottom {
width: 980px;
height: 30px;
background:green;
clear: both;
bottom: 0;
margin: 0px auto;
padding: 0;
}
.cell {
float: left;
width: 29px;
height: 29px;
border: 1px dotted;
}
I apologize if my code is messy and unorganized. I am still figuring out how to best keep it organized and generally write it in an acceptable fashion. Thanks a lot for your help.
Update: I've made the change Ando suggested, but I'm still unable to get selectable to work. I've tried changing #plateActual to an ol or ul and appending li.cell instead but that did not work either.
I was wondering if the reason is my css is somehow interfering with it, but I'm not sure how to fix that without destroying the formatting.
The element returned by append will be the element to which the add is performed - in your case plateActual- so you will be adding the cell class to the wrong element.
When you append the cells - you use $('<div/>') - which will translate to "get the elements of type '<div/>' from the dom and move them inside my 'plateActual' element" - you should add without $ as you are creating an element that does not yet exist.
Something like this should work (http://jsfiddle.net/k3YJY/):
for (var i=0; i<5;i++) {
$('#plateActual').append('<div class="cell"/>');
}