The mobile and tablet version of my website are a scaled down version of my desktop site. With the mobile version a fixed navigation bar and slidetoggle navigation come into play.
This all worked for a year until about a month ago and something doesnt seem to be recognising the smaller device sizes and I cannot work out what is wrong. On the mobile version the website contents are squashed to the left. Usually I can fix this with changes to css declarations but any changes I now make dont seem to have any effect.
I have run my code through various code checkers and none have flagged up any major errors.
This is my meta data:
<!DOCTYPE html>
<html <?php language_attributes(); ?> >
<head>
<title>MISSNISAA</title>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link href="http://allfont.net/allfont.css?fonts=montserrat-light" rel="stylesheet" type="text/css" />
<script src="https://use.typekit.net/rsg8obz.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;
i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new
Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;
m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com
/analytics.js','ga');
ga('create', 'UA-64074269-1', 'auto');
ga('send', 'pageview');
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
/*prepend menu nav icon*/
$("#menu-nav").prepend("<div id='menu-nav-icon'>☰</div>");
/*toggle nav*/
$("#menu-nav-icon").on("click", function() {
$(".menu-nav").slideToggle();
$(this).toggleClass("active");
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
/*prepend menu social icon*/
$("#menu-social").prepend("<div id='menu-social-icon'>☰</div>");
/*toggle social*/
$("#menu-social-icon").on("click", function() {
$(".menu-social").slideToggle();
$(this).toggleClass("active");
});
});
</script>
</head>
Grateful for any help as I have hit a wall with this.
Just to add the first photo is what my website used to look like on the mobile version but now looks like the second photo. I have made no changes to the css during this time so I don't see why all of a sudden the media queries don't work.
Related
I'm making a single page application using code igniter and jquery, so the master page contains the upper part of html including the css etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>BGC</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/fontawesome.min.css';?>">
<!-- other css here -->
<!--[if lt IE 9]><script src="js/html5shiv.js"></script><![endif]-->
</head>
<body>
<div id="main-section">
</div>
and then a footer page to include the lower part of the html
<script>
var BASE = "<?php echo site_url(); ?>";
</script>
<script src="<?php echo base_url().'assets/js/jquery.js';?>" type="text/javascript"></script>
<!-- other js scripts here -->
</body>
</html>
so the div main-section is where i would insert dynamic pages using jquery and codeigniter view.. the problem is when i try to fetch and load it to the container, the js and css are getting corrupted but no errors are being thrown.
i fetch them from CI in this way
public function shop() {
$this->load->view('display/shop');
}
and using jquery like this, ajax request
JQ("#btnshop").on('click', function(e) {
e.preventDefault();
JQ.ajax({
url: BASE + "/display/home/shop",
data: {},
success: function(result) {
JQ("#main-section").html(result);
}
});
return false;
});
the #shop is the id of the navigation button, which i did not include in here. thanks in advance for any ideas how work it around
Try below code it should work.
echo $this->load->view('display/shop',TRUE);
I downloaded some free web templates and updating the site as per my needs. I observed most of site content is displayed in upper case. Can someone help me, how to disable this?
Attached is the screenshot of the page. All links and content is displayed in uppercase.
How to display this in normal case letters?
Following is my html before body
<!DOCTYPE html>
<html>
<head>
<title>Freee-Learn. Your learning partner...</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Free Style Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:100,300,400,500,700,800,900,100italic,300italic,400italic,500italic,700italic,800italic,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<!--//fonts-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/myJavaScript.js"></script>
<!-- start menu -->
<script src="js/simpleCart.min.js"> </script>
<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/memenu.js"></script>
<script>$(document).ready(function(){$(".memenu").memenu();});</script>
</head>
And also i observed, when the internet is off, the site is displayed in normal case letters.
It's the fonts that you're using in the website. The fonts are downloaded from an Google API. Download the fonts to use locally or use another font.
One of the web fonts you're leveraging (Alegreya Sans SC) is only available as a small caps family. When your "internet is off", the web font is not being loaded and therefore a default family is leveraged which most likely supports lower case.
To fix this, find where you're using Alegreya Sans SC within your stylesheets and simply switch to a more multi-case friendly family.
Looks like the google font Alegreya is causing this google.com/fonts/specimen/Alegreya+Sans+SC
I'm working on my personal website (building from a template) and just as I finished up, my links stopped responding to left clicks. If you right-click and choose 'Open in New Tab,' they work just fine. When you hover over them, you can see the URL in the status bar at the bottom of the browser.
I've done a fair bit of searching about this already, and it seems there may be some JavaScript that's overriding the default behavior for the tag. I've tried looking in the Network and EventListener sections of the Chrome and Firefox DevTools, but I'm not entirely sure what I'm looking for.
I don't want to paste the code for the whole site here (too long), but you can download it from my Github page to try it out yourself.
Since I think the problem is related to JavaScript, here are the header and footer sections of my site, so you can see what I have attached:
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Mike Lipson | Instructional Technology Specialist</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="prefetch" href="images/zoom.png">
<style type="text/css" media="screen">
a.heading_link {
color: white;
}
</style>
<!-- SCRIPTS -->
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script> <!-- Potential link-breaker -->
<script type="text/javascript" src="fancybox/jquery.fancybox.pack-v=2.1.5.js"></script>
<script src="js/script.js"></script>
<!-- fancybox init -->
<script>
$(document).ready(function(e) {
var lis = $('.nav > li');
menu_focus( lis[0], 1 );
$(".fancybox").fancybox({
padding: 10,
helpers: {
overlay: {
locked: false
}
}
});
});
</script>
The carousel API automatically catches any click on [data-slide] or [data-slide-to] elements (tags that possess the data-slide or data-slide-to argument).
And you set on one of your main containers the <div data-slide="1"> attribute (see index.html#L68) therefore any click will be catched and prevented (e.preventDefault()).
You can see that in the carousel plugin definition js/carousel.js#L187.
So you should either remove this attribute and use another attribute name, or deactivate the carousel API.
I'm tearing my hair out to find why Chosen plugin (http://harvesthq.github.io/chosen/) doesn't want to work. I have tried different things, such as calling the chosen plugin directly in jQuery, rather than in JavaScript as below, but none of it works. I believe I have called the libraries correct, and the stylesheets, yet none of the functionalities of the plugin are applied to the select boxes. It's probably a simple mistake that I've made somewhere.
This is my markup, it first calls the stylesheets. echo $page_htmlhead calls javascript libraries such as latest jQuery from Google API.
<head>
<!--[if lt IE 9]>
<script src="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/scripts/js/html5shiv.js"></script>
<![endif]-->
<title>flyeuro.com</title>
<meta http-equiv="X-UA-Compatible" content="IE=7"></meta>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="description" content="Europe's favourite virtual airline!">
<link rel="shortcut icon" type="image/x-icon" href="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/img/favicon.ico">
<link rel="stylesheet" media="all" type="text/css" href="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/css/style.css" />
<link rel="stylesheet" media="all" type="text/css" href="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/scripts/js/main/chosen/chosen.css" />
<?php
/* This is required, so phpVMS can output the necessary libraries it needs */
echo $page_htmlhead;
?>
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/scripts/js/main/chosen/chosen.jquery.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$(".chosen-select").chosen()
});
</script>
// ...rest of <head> code
</head>
Inside $page_htmlhead...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
I finally then display the options for the user on a form...
<select class="chosen-select" name="depicao" data-placeholder="Departure Airport">
<option value="">All</option>
<?php
foreach ($airports as $airport)
{
echo '<option value="'.$airport->icao.'">'.$airport->icao.' - '.$airport->name.'</option>';
}
?>
</select>
I am struggling a bit with conflicting jquery in my head section of my site.
The problem happens when if I put the bootstrap jquery underneath then it stops working and the supersized DOES work.
But then when I swap them around it is visa versa, supersized DOESN'T work and bootstrap DOES.
This is my current head section
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/1140.css">
<link rel="stylesheet" href="/css/ie.css">
<!-- Bootstrap (for mobile navigation) -->
<link href="/css/bootstrap.css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width:480px)">
<link href="/css/bootstrap-responsive.css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width:480px)">
<!-- supersized sytlesheets -->
<link rel="stylesheet" href="/css/supersized.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/theme/supersized.shutter.css" type="text/css" media="screen" />
<script src="js/vendor/modernizr-2.6.1.min.js"></script>
<!-- supersized scripts (can't go in the bottom as it stops working -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<!--bootstrap has to go below min jquery for it to work and above supersized-->
<script src="/js/bootstrap/jquery.js"></script>
<script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
When I look in the bootstrap/jquery.js file, I cannot get my head round it as it is just all block text.
Anybody got any solutions? I am only using the bootstrap for mobile version also, so is there a way I can just include the jquery at a certain width, for example 480 - (which is when I disable the supersized anyway).
I also have script at the bottom of the document also and maybe this could be affecting this also??
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</script>
<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Bootstrap Scripts -->
<script src="/js/bootstrap/bootstrap-transition.js"></script>
<script src="/js/bootstrap/bootstrap-dropdown.js"></script>
<script src="/js/bootstrap/bootstrap-collapse.js"></script>
<!-- Bootstrap scripts end -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
Basically, just due to trial and error, supersized won't work at the bottom for some reason and has to go in my head section.
And when bootstrap works then the supersized will not.
Please let me know a way to get past this and if there is something I have done wrong in my head section that is causing this.
Thanks