here's a link to the webpage causing my problems (WordPress site): http://brightpixelstudios.co.uk/portfolio/
When I click on the thumbnail to start a pop up window, the window doesn't appear as it should and there's a weird couple of 'next' and 'previous' links appearing in the bottom left of the screen.
It was working a month ago when I last checked. Is there anything in the code I can do to fix it?
Any help would be much appreciated!
Regards, Will
It looks as though the 3 stylesheets below are not being loaded by the page.
<link rel='stylesheet' id= href='http://brightpixelstudios.co.uk/ext/contact-form-7/includes/css/styles.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id= href='http://brightpixelstudios.co.uk/ext/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<link rel='stylesheet' id= href='http://brightpixelstudios.co.uk/skin/02/includes/css/prettyPhoto.css?ver=3.5.2' type='text/css' media='all' />
Probably because of the empty id= tag.
The lightbox seems to be loading at the bottom of the page but there are no styles being applied.
Related
I am trying to incorporate the jQuery UI datepicker function into a website I'm creating, but for some reason it's showing up translucent. I've read around and aparently it's caused from not linking the css file.
I've linked all of these files in the head in this order:
jquery-ui.min.css
jquery-ui.structure.min.css
jquery-ui.theme.min.css
jquery-1.11.3.min.js
jquery-ui.min.js
They all came from when I DL'd jQuery UI (except the jQuery v1.11.3 of course)
Then, in the form area I have:
<form id="purchase">
<fieldset class="purchase">
<input type="text" id="datePicker">
</fieldset>
</form>
and then in my javascript file I have:
$(function() {
$( '#datePicker' ).datepicker();
});
The result is the date picker shows up but it is transparent. I've been staring at this for hours thinking there's something obvious I'm missing but I just can't see it. Any help would be greatly appreciated.
Theres something up with your style sheet, not sure what it is but something is inserting an empty style tag into your head, replacing it with jquery-ui.css seems to fix it. Hope fully this works in the source as well.
Change
<link type="text/css" rel="stylesheet" src="css/jquery-ui.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.structure.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.theme.min.css">
To
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.structure.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.theme.min.css">
Here's the website: carrotcrunchpvp.comule.com. The website is made for 16 : 9 but thats besides the point - It doesnt seem to want to go to any of the navigation links, you cant touch scroll and you cant used the keyboard (most importantly...). I've tried changing the version of jquery around to an older version but it doesn't fix anything.
I'm getting this popping up in the console when I click a direction (for e.g):
KeyboardEvent.key value "Left" is obsolete and will be renamed to "ArrowLeft". For more help https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent.key
and
Calctheta is not define which is part of the intialisation.js http://carrotcrunchpvp.comule.com/intialisation.js
It doesn't work in Chrome either...
You can not initialise the plugin before including it. You are including your file initialisation.js before than fullPage.js.
This is not exclusive of fullpage.js, this is like so for any other plugin or javascript function.
The initialization inclusion should be at the end, just after any plugin being initialized there.
<title>Catholic Professional Standards</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="jquery.fullPage.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="media_queries.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script src="jquery.fullPage.js" type="text/javascript"></script>
<script src="loadingscreen.js" type="text/javascript"></script>
<script src="intialisation.js" type="text/javascript"></script>
I need to use javascript to load a different stylesheet based on a URL variable that is being passed.
The scenario is this: We need to maintain a mobile website with one CSS stylesheet, and a different stylesheet that will be used to style the same page when it is accessed via a web-view loaded in an iOS app.
If you look at www.blog.meetcody.com you'll see that we're already using media queries and responsive webdesign. The reason that this is insufficient for us is because media queries cannot detect if the page is being loaded via a webview in a native app vs. a mobile safari. We need to handle these two cases separately. The blog is a hosted wordpress blog, that we are accessing via a JSON API in our iOS app.
The way we are handling this is as follows: When the webpage is loaded via our iOS app, we append a variable to the end of the URL "/?app=true". What I'd like to do is check to see if the URL contains this string, and if so, use a different webview.
I am attempting to do this with the below code:
<script language="javascript" type="text/javascript">
if(window.location.href.indexOf('/?app=true') > -1) {
document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"http://blog.meetcody.com/wp-content/themes/standard/appstyle.css\" />");
}
document.close();
</script>
The issue that I'm having is that the above code doesn't actually load the appstyle.css stylesheet when ?app=true is part of the URL.
If you take a look at http://blog.meetcody.com/wp-content/themes/standard/appstyle.css?ver=3.4.2 you can see that I'm testing this by setting the background: black in the body {} tag
body {
background: black;
}
Whereas, in style.css at http://blog.meetcody.com/wp-content/themes/standard/style.css?ver=3.4.2 the body background color is #F2F0EB; in the body {} tag
body {
background: #F2F0EB;
}
Of course, we want to do more than just change the background color, but I'm just showing this as an example.
Is there a better way to do this, or is there something wrong with my code? Perhaps I cannot use a direct link to appstyle.css an href in javascipt? Help much appreciated. And Merry Christmas!
You can add a CSS stylesheet by using appendChild() like this:
var header = $.getElementsByTagName('head')[0];
var styleSheet = $.createElement('link');
styleSheet.rel = 'stylesheet';
styleSheet.type = 'text/css';
styleSheet.href = 'style.css'; // name of your css file
styleSheet.media = 'all';
header.appendChild(styleSheet);
Of course you could change this example to accomodate different css file names depending on the current URL by doing something like this:
styleSheet.href = (isMobile == true) ? 'mobile.css' : 'default.css';
You should never try to close the document when you use inline script. document.close is only needed if you document.write to an iframe, frame or new window
Also I suggest you test the location.search rather than the href since that is where you placed the flag.
Please try
<script language="javascript" type="text/javascript">
if (location.search.indexOf('app=true') > -1) {
document.write('<link rel="stylesheet" type="text/css" href="http://blog.meetcody.com/wp-content/themes/standard/appstyle.css" />');
}
</script>
and possibly place that script AFTER the other stylesheets, if you want to override stuff set in one of your 10+ sheets at your site, or better: test the query string on the server, or where you set the query string to app=yes, set something in the session or similar and use that to include the correct css on the server instead of relying on JS
PS: Your body tag has the classes of home and blog on your homepage. I suggest you look to the above mentioned stylesheets and see what the colour is in those for those classes.
PPS: I do not see any media detection here
<link rel='stylesheet' id='standard-activity-tabs-css' href='/wp-content/themes/standard/lib/activity/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='gcse-widget-css' href='/wp-content/themes/standard/lib/google-custom-search/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-ad-300x250-widget-css' href='/wp-content/themes/standard/lib/standard-ad-300x250/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-ad-125x125-widget-css' href='/wp-content/themes/standard/lib/standard-ad-125x125/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-ad-468x60-css' href='/wp-content/themes/standard/lib/standard-ad-billboard/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-personal-image-widget-css' href='/wp-content/themes/standard/lib/personal-image/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-influence-css' href='/wp-content/themes/standard/lib/influence/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css' href='/wp-content/themes/standard/css/lib/bootstrap.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-responsive-css' href='/wp-content/themes/standard/css/lib/bootstrap-responsive.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-css' href='/wp-content/themes/standard/style.css?ver=3.4.2' type='text/css' media='all' />
Is there a way to specify text to appear on the bottom and header of every page when printed?
or
Is there a CSS solution which would allow a header and footer to repeat on each printed page?
thank you
Although your question is a bit too general, I'm assuming you want that specific text to appear only on your print page and not in your website. Just do a
<p class="print-this">TEXT TO BE SHOWN IN PRINT</p>
then in your print.css
.print-this {
display: block;
}
and in your main.css
.print-this {
display: none;
}
Oh and you need to include your stylesheet with the media option as Giu said:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
Using position:fixed, should render on every page when used in a print context
http://css-discuss.incutio.com/wiki/Printing_Headers
I am trying to load my print.css but it does not seem to be loading. it work Fine in FF and Safari but the problem is only in IE.
I have the regular external css for the page inbetween the head tags
And when the user click on the print link . it loads the print css .
<div class="linkPrint">
<a target="_blank" href="?format=print">Print</a>
</div>
var format = getUrlParam('format');
if (format == 'print') {
$('head').append('<link href="/theme/print.css" rel="stylesheet" type="text/css" />');
}
But,in IE it load the standard css instead of the print.css.
How do can this be fixed for IE6?
Thanks
You can have the print CSS and your screen CSS both loaded at the same time on the page without them interfering with each other - you need to specify the media attribute on the link tag:
<link href="/theme/print.css" rel="stylesheet" type="text/css" media="print" />
<link href="/theme/screen.css" rel="stylesheet" type="text/css" media="screen" />
No need to go through the javascript trickery.
As for IE6 - it does support this, as can be seen on the comparison list on this page.
Try removing the <link> to the other css file when you append the print.css
try with document.write,
document.write('<link href="/theme/print.css" rel="stylesheet" type="text/css" />');