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);
Related
Should be an easy question...
My NAV Bar Template (working): https://codepen.io/ScottFSchmidt/pen/GMzgKz
...imported into my Portfolio (is NOT working): https://scottschmidtportfolio.000webhostapp.com/# The menu is not going down on click(the menu appears when the screen is smaller).
What is causing this? I have a feeling it is something within my scripts (below):
EDIT NEW UPDATED SCRIPTS from https://www.bootstrapcdn.com/:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>SS Studio</title>
<meta charset = "UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"></script>
<script src="https://use.fontawesome.com/fab417e5fd.js"></script>
<script language="javascript">
Check the console:
Make sure Bootstrap loaded correctly. It look like you are trying to add bootstrap in three places.
Better to use CDNetworks. Here is the link for bootstrap cdn
Also you had one script error:
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
// }); // remove this
Caution:
You're using HTTPS but some resources are requested in an insecure way. use https:// for including all the resources like images, css, js, etc
I am trying to get this working in an extension for a little existing CMS.
The problem is: This script needs to be placed before </body>, but the CMS only allows me to place it to the head of the page.
Now I tried something like this:
$(function() {$('p').selectionSharer();}); - this works for the Twitter and Mail-function, but it does not recognize the Facebook App ID in the page.
The Facebook-ID is in the heading swell:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://127.0.0.1:8080/index.php/">
<meta property="twitter:card" content="summary_large_image">
<meta name="fb:app_id" content="123456789">
<meta property="og:site_name" content="Pagekit">
<meta property="og:title" content="Home">
<meta property="og:description" content="Globale Meta">
<meta property="og:url" content="http://127.0.0.1:8080/index.php/">
<script>
$(function() {$('p').selectionSharer();});
</script>
<script src="/selectionshare/app/assets/selection-sharer/dist/selection-sharer.js?v=7e08"></script>
Any idea how I could get this working?
This what jQuery.ready is for.
$(document).ready(function() {/* my code */ });
This functions similarly to adding code to the end of the body.
<script>
$(document).ready(function() {
$('p').selectionSharer();}
});
</script>
Of course you can try
window.onload = function(){/* my code */};
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.
I have to integrate widget html file in a existing html page but i am getting many css issue after this. Is there any way that i can restrict css files of main html not to apply on widget html file.
**Sample html :**
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class="csstransforms" lang="ru" >
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="abc.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="abc.js" type="text/javascript"></script>
</head>
<body>
<!-- WIDGET CODE-->
<!DOCTYPE html>
<html lang="en" ng-app="adidas" bb-api-url="https://adidas-dev.bookingbug.com">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="def.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="defjs" type="text/javascript"></script>
</head>
<body>
.......widget html code
</body>
</html>
<body>
</html>
With HTML you are not allowed to have two HTML documents in a single file.
One approach to solve this is by using an iframe in your main HTML:
<iframe src="widget.html"></iframe>
So you create your widget in its own HTML file with its own styles and javascript scripts, and embed it in your main HTML file using the iframe (then your widget is completely isolated from your main HTML scripts and styles and not be affected by them).
Another approach will be to create a separate CSS for you widget and include it in your main HTML, then insert your widget's markup only (without the html and body tags) in your main HTML body.
In your widget CSS file you should create a "namespace" for you widget's style that will not collide with the rest of your CSS by doing something like this:
.my-widget-name {
// your widget styles
}
.my-widget-name span.name {
// your widget style
}
.my-widget-name .box {
// your widget style
}
.......
.......
(I usually like to use something like LESS, but shown above is a traditional CSS example)
"my-widget-name" should be a unique class name that only your widget is using, and by sub-classing all of your widget styles under this class name, you are basically isolating it from the rest of your CSS.
Hope it helps a bit
When I use the standard technique ons-navigation, the javascript code on the ons-page does not execute. Does anyone know what I do wrong?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user- scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
ons.bootstrap();
ons.disableAutoStatusBarFill(); // (Monaca enables StatusBar plugin by default)
</script>
</head>
<body>
<ons-navigator var="myNavigator" page="login.html">
</ons-navigator>
</body>
</html>
And here is the login.html:
<ons-page>
<script>
console.log("test11");
</script>
</ons-page>
The reason why it's not working is that the browser won't execute script tags that are added through replacing el.innerHTML, which is what Onsen does when you push a page.
Please see this question for why it's not working:
Can scripts be inserted with innerHTML?
You shouldn't use inline script tags mixed in your HTML. Please look up how to structure you're JavaScript.