I added the fancybox 2 plugin to my site and it works fine when I test it in Chrome and Safari, but in Firefox it doesn't. The page loads fine, but when you click on a thumbnail to open fancy box, the margin styles in my body tag are cancelled (I determined this using firebug) and my whole layout shifts entirely to the right side of the viewport. When you click out of fancy box the layout remains pushed to the right. Has anyone had a similar problem and would you have any tips on how to fix it? I've posted my DOCTYPE and head bellow along with my css rules for the body. If more info is needed let me know. The site is not yet up so I can't link to it. I'm new to this so sorry if I've missed anything obvious. Thanks so much to anyone who thinks they can help!!
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Commercial</title>
<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="styles/commercial_new.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Scripts/fancyapps-fancyBox-e4836f7/source/jquery.fancybox.pack.js"></script>
<link href="Scripts/fancyapps-fancyBox-e4836f7/source/jquery.fancybox.css" rel="stylesheet" type="text/css">
</head>
body {
width: 1050px;
background: #c7c7c7;
margin: 0 auto;
overflow: scroll;
}
I actually had this same problem this morning. The solution I went with (there's probably a better option) is to create a div wrapping the body content and set the width on that, then set the body width to 100%;
<body>
<div id="container">
// Page content
</div>
</body>
CSS:
body { width: 100%; }
#container { width: 1050px; margin: 0 auto; }
Seemed to fix issues with Firefox, and we tested it back to IE7 without any issues.
Related
I'm working on creating resizable DIVs in html and have found some code online as reference.
When running the HTML source code on chrome, the resizable function does not work and I can only see plain text with no functionality. However, the code works fine on JSFiddle.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#resizable" ).resizable();
} );
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>
This is the exact code that I'm working with. Any ideas why it's not functioning properly on chrome?
I can only see plain text
Your CSS is not loading.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
This is a scheme relative URL.
It will work fine providing the HTML document you are viewing is loaded over HTTP or HTTPS.
Since it is not, you must be loading it directly from your local filesystem with a file: scheme URL (typically this will be because you double clicked the HTML document in Windows Explorer).
You need to load the HTML document from a web server or change the URL to the CSS so it uses an absolute URL (one which starts https:).
Here, I recorded video about problem.
https://www.youtube.com/watch?v=WZbKix3XGTE
Problem is when keyboard on screen. The content is behind of keyboard not reachable. If there is input end of page user can't see what is typing in it.
I have this issue only with chrome, other browsers work normal.
All solutions in my mind about this contains javascript. But I am not sure javascript handle this perfectly. I wanted to ask you knowledge before start. Is there any other option for this only with CSS or something else?
Code in example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=1" />
<title></title>
<style type="text/css">
#top {
background-color: lightgreen;
width: 100%;
height: 600px;
}
#bottom {
background-color: green;
height: auto;
padding: 20px;
margin-top: 10px;
}
#bottom > input {
display: block;
padding: 5px;
width: 100%;
}
</style>
</head>
<body>
<div id="top">Top</div>
<div id="bottom">
<input type="text" />
</div>
</body>
</html>
Codepen Link
https://codepen.io/hllktlhndd/pen/yZKzyZ
Did you get answer for this ?
This worked before okay, but now the android-chrome comes on top of the page and does not push it up anymore.
I'm using webview, maybe they have some option for it?
Quick fix is to add padding at the bottom of the screen, maybe 200 - 300px
i am trying to implement a style switcher according to https://www.inetsolution.com/blog/march-2010/css-style-switcher-a-quick-and-dirty-how-to .
but as soon as i add a title="" to the css link, the css file won't get loaded on the page an the styles fall back to default bootstrap.
my external css files are added at the bottom of the body. the order is:
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 0px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/my-styles.css">
<link rel="stylesheet" href="css/my-alternate-styles.css">
<link rel="stylesheet" href="fontello-xxxxxxxx/css/fontello.css">
is there something i miss?
You probably did everything right (except one thing, see below*), the code that's in the article is using curly quotes ‘’ “” when it should be using straight quotes '' "".
<a href=”#” onclick=”setActiveStyleSheet(‘default’); return false;”>Change style to default</a>
<a href=”#” onclick=”setActiveStyleSheet(‘alternate’); return false;”>Change style to alternate</a>
So if you copied and pasted this part, it won't be parse correctly. This is the correct way with straight quotes:
Change style to default
Change style to alternate
Review this PLUNKER instead of the Snippet. The Snippet won't work because of the multiple stylesheets involved.
SNIPPET (Not Functional, review PLUNKER instead.)
<!doctype html>
<html>
<head>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<link href='default.css' title='default' rel='stylesheet'>
<link href='alt.css' title='alt' rel='alternate stylesheet'>
<style>
body {
padding-top: 50px;
padding-bottom: 0px;
}
</style>
</head>
<body>
<section>
<p>TEST</p>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='styleSwitcher.js'></script>
</body>
</html>
* I noticed you said:
...my external css files are added at the bottom of the body...
You should always place <link>s inside the <head>. Most often, JavaScript/jQuery needs the actual DOM to be loaded before it can do anything. So it's important in most situations to make sure your styling (<link> and <style>) go first and inside the <head>.
For <script>, it's best to place them at the bottom of <body> just before the closing tag </body>. See the Snippet and PLUNKER for example of <link>, <style>, and <script> layout.
I've a piece of code that's been working fine until I include some css.
Here is the link to the code (the code editor here didn't like the mix of script and html and was testing my patience sorry).
Gist code snippet can be viewed here
It's using Bootstrap. The issue is this works fine (it displays a text input with a x to clear it and when you press the x it clears the text input box). When I include the...
<!-- CSS -->
<link href="css/app.css" rel="stylesheet">
though, clicking the x in the input box does nothing. Can anyone see any obvious reasons?
Without CSS included it's fine. With CSS included it fails.
The css file is basically a massive compiles .less file and probably not appropriate to place in a code box here so here it is in another gist link.
UPDATE: Here are the console logs if that helps: enter link description here
The locations of your javascript file links and event handler code are incorrect. You are calling $("#searchclear").click(..... before you load jQuery and all of the linked js files should be just before the closing body tag, not after it. Changing your html to the below will fix this issue:
Working Demo
(note that I changed some of the links to link to the CDN versions of the files to avoid errors in my demo):
<!DOCTYPE html>
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>create appt</title>
<!-- Vendor CSS -->
<link href="vendors/animate-css/animate.min.css" rel="stylesheet">
<!-- CSS -->
<link href="css/app.css" rel="stylesheet">
<!-- Following CSS codes are used only for specifics in this test-->
<style type="text/css">
.margin-bottom > * {
margin-bottom: 20px;
}
#searchclear {
position: absolute;
right: 5px;
top: 0;
bottom: 0;
height: 14px;
margin: auto;
font-size: 14px;
cursor: pointer;
color: #ccc;
}
</style>
</head>
<body>
<div class="btn-group">
<input id="searchinput" type="search" class="form-control" value="LUNCH">
<span id="searchclear" class="glyphicon glyphicon-remove-circle"></span> </div>
<!-- Javascript Libraries -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="vendors/nicescroll/jquery.nicescroll.min.js"></script>
<script src="vendors/waves/waves.min.js"></script>
<script src="vendors/bootstrap-growl/bootstrap-growl.min.js"></script>
<script src="vendors/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
<script src="vendors/sweet-alert/sweet-alert.min.js"></script>
<script src="js/functions.js"></script>
<script>
$("#searchclear").click(function(){
$("#searchinput").val('');
});
</script>
</body>
</html>
<!-- css -->
<link href="css/app.css" rel="stylesheet" type="text/css">
EDIT
I had my index.css overriding my original header layout. Watch your ID's and classes!
EDIT
I'm using jQuery to load my website header and footer sections. Then display them on my index & other pages. However, it seems to resize my header whenever I try to load it. Anyone have any clue as to why that may be? I did some research on this problem but didn't found anything that helps.
Here's the websites it's affecting.
INDEX
HEADER
and here's the JSFiddle that has my code in it for the header
JSFiddle for Header
and my index code how I'm calling header
<html>
<head>
<title>HobbsBear Studios</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href='http://fonts.googleapis.com/css?family=Exo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="_css/index.css" type="text/css" />
<link rel="stylesheet" href="_css/photobanner.css" type="text/css" />
<script type ="text/javascript" src="_javascript/photobanner.js"></script>
<link rel="icon" href="../favicon.ico" type="image/x-icon">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!-- A buncha stuff in the middle --!>
<div id="footer"></div>
</body>
</html>
So it is displaying all of the elements just not in the correct layout. Any ideas?
The root cause of this is because the 'Slidy container' that you are using overrides the class names that you are using in your header. You may have to change these class names. Within 2 minutes i found that the following 2 classes were breaking it for you and they are coming from the index.css page.
#menu {
position: absolute;
top: 80%;
left: 25%;
width: 50%;
font-family: 'Exo', sans-serif;
font-weight: bold;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 550px;
}
Thing is you will HAVE to change the ID's either in the content or the header because having more then one of the same ID on a page is not good practice and on some browsers will throw out an error cause it's not 'valid' html structure. ID's are meant to be used to target exact specific elements on a page where as classes are used for targeting multiple elements at once.
Fix this and you should be good to go.