Here is my code:
<head>
<link rel="stylesheet" href="http://localhost/css/estilos.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
The program works, but if I use the inspect element, I get these warnings. Can anyone help me to figure it out?
Hope you can help me :D
The problem is that you have linked to your own version of jQuery incorrectly.
As you are already loading it twice from the CDNs, you shouldn't even need to load it locally. Just load the latest version of jQuery from the CDN once, and don't worry about loading a local copy as well:
<head>
<link rel="stylesheet" href="/css/estilos.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
Note that your CSS was throwing an error as well as your jQuery, meaning that you do not have a file at http://localhost/css/estilos.css. I've used /css/estilos.css/ in my anser, to refer to the root. This would point the CSS file at: [root]/css/estilos.css. Depending on your file structure, you may need to use css/estilos.css/ instead (without the leading slash). For more information about relative paths, check out CSS Trick's article.
Hope this helps!
It says your local css and js files are not found. look right at the debug panel, there is a 404 code.
Related
I do not understand what is going on here.
This is my file-data "structure":
Over here is the content of my folder "css"
So, in my program: this files"estudiante.php","editar.php" and "hola.php" got the same header. Take a look:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
The problem is that i could not link the file "estilos.css" from the "css" folder because i was given some errors while i was checking the inspect element tool using chrome:
But it is strange, because i wrote this line on my header:
<meta name="viewport" content="width=device-width, initial-scale=1">
That line makes my page responsive, but those commands are in my estilos.css file.. i don get it, take a look:
So, estilos.css doesnt appear in my code but the header uses the content and makes my website responsive?. I dont understand this mates :(
Double-check your file naming conventions. It looks like you're hiding file extensions, since bootstrap, bootstrap.min, etc don't have .css on the end, but estilos.css does. It's possible your file is actually named estilos.css.css and you aren't aware.
https://www.howtogeek.com/205086/beginner-how-to-make-windows-show-file-extensions/
I can't figure it out what could cause this issue, but i'am pretty sure it simple. I am extending main view main.blade.php (located in views folder). This includes css from partials folder.
I have two pages: Enquire, Approved enquire. (both located in views/trader/ folder.) only difference is routing, one would have /enquires the other would have /enquires/approved.
Blade/Css working if on main route: Route::get('/enquires','Trader\PagesController#getEnquires');
Blade/Css does not work when using suburl: Route::get('/enquires/approved','Trader\PagesController#getApproved');
Please refer to this image:
routing display error
If you require any other information please let me know,
Tahnks in advance,
Dan
It seems the problem is in how you're creating links to assets (images, CSS and JS files). To make it work, use Laravel asset() helper:
<link rel="stylesheet" href="{{ asset('css/theme.css' }}">
Which will create full path to an asset.
Also, you must keep all assets inside public directory of your project, for example: /laravel_project/public/css/theme.css
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>#yield('title')</title>
<meta name="keywords" content="HTML5 Template" />
<meta name="description" content="Trusted Workers - Find local tradesmen">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Web Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800%7CShadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.css">
<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css">
<!-- Theme CSS -->
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/theme-elements.css">
<link rel="stylesheet" href="css/theme-blog.css">
<link rel="stylesheet" href="css/theme-shop.css">
<link rel="stylesheet" href="css/theme-animate.css">
<!-- Current Page CSS -->
<link rel="stylesheet" href="vendor/rs-plugin/css/settings.css" media="screen">
<link rel="stylesheet" href="vendor/rs-plugin/css/layers.css" media="screen">
<link rel="stylesheet" href="vendor/rs-plugin/css/navigation.css" media="screen">
<link rel="stylesheet" href="vendor/circle-flip-slideshow/css/component.css" media="screen">
<!-- Skin CSS -->
<link rel="stylesheet" href="css/skins/default.css">
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Head Libs -->
<script src="vendor/modernizr/modernizr.js"></script>
I always have some problems with IE. The problem is that my website must work on every browser, including IE.
Everything works well for the ckeditor plugin named prgfilemanager (I can add pictures into my ckeditor textarea). Every browser are working except IE... I first succeed displaying ckeditor using
<meta http-equiv="X-UA-Compatible" content="IE=9.0">
Without that meta, the textarea isn't a ckeditor textarea.
My problem is that when I try to add pictures, nothing happens ONLY IN IE.
When I click to search pictures there is a popup with the interface with no root..
If i write http://XXX/ckeditor/plugins/pgrfilemanager/PGRFileManager.php?type=Image&CKEditor=Description&XXX everything works well on every browser except for IE..
I'm on IE9. How to make pgrfilemanager working on IE 9 ?
This is what IE gives me
I found how to make it work. As I said, I used <meta http-equiv="X-UA-Compatible" content="IE=9.0"> in my files to make ckeditor working. What to do if you have the same problem that I HAD, in ckeditor\plugins\pgrfilemanager, open PGRFileManager.php and add the meta <meta http-equiv="X-UA-Compatible" content="IE=9.0"> on the <head>. Like
<head>
<!-- ADD THIS -->
<meta http-equiv="X-UA-Compatible" content="IE=9.0">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>PGRFileManager v2.1.0</title>
<link rel="stylesheet" type="text/css" href="css/sunny2/jquery-ui-1.8.1.custom.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.treeview.css" />
<link rel="stylesheet" type="text/css" href="css/fancybox/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="css/PGRFileManager.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.treeview.js"></script>
<script type="text/javascript" src="SWFUpload v2.2.0.1 Core/swfupload.js"></script>
<script type="text/javascript" src="js/jquery.i18n.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.2.1.pack.js"></script>
<?php if (PGRFileManagerConfig::$ckEditorScriptPath):?>
<script type="text/javascript" src="<?php echo PGRFileManagerConfig::$ckEditorScriptPath ?>"></script>
<?php endif;?>
<script type="text/javascript" src="lang/lang.js"></script>
<script type="text/javascript" src="js/PGRUploader.js"></script>
<script type="text/javascript" src="js/PGRContextMenu.js"></script>
<script type="text/javascript" src="js/PGRSelectable.js"></script>
<script type="text/javascript" src="js/PGRFileManager.js"></script>
<script type="text/javascript" src="js/PGRFileManagerContent.js"></script>
</head>
In my project I am using imperavi-redactor library. But it seems it doesn't load properly.
When using the import() method, the library is properly loaded in the assets, but it doesn't work. If I modify the template I am using to manually load the css/js AFTER all other libraries, it works.
Here is the generated HTML:
<head>
<link rel="stylesheet" type="text/css" href="/assets/92dfc12c/redactor.css" />
<link rel="stylesheet" type="text/css" href="/assets/f5a106d4/jui/css/base/jquery-ui.css" />
<script type="text/javascript" src="/assets/f5a106d4/jquery.js"></script>
<script type="text/javascript" src="/assets/92dfc12c/redactor.js"></script>
<script type="text/javascript" src="/assets/92dfc12c/lang/es_ar.js"></script>
<title>Create Notification</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/themes/p35/css/main.css" rel="stylesheet" type="text/css" media="all">
<link href="/themes/p35/css/mediaqueries.css" rel="stylesheet" type="text/css" media="all">
<!--[if lt IE 9]>
<link href="/themes/p35/css/ie/ie8.css" rel="stylesheet" type="text/css" media="all">
<script src="/themes/p35/js/ie/css3-mediaqueries.min.js"></script>
<script src="/themes/p35/js/ie/html5shiv.min.js"></script>
<![endif]-->
<!-- Slider -->
<link href="/themes/p35/js/responsiveslides.js-v1.53/responsiveslides.css" rel="stylesheet" type="text/css" media="all">
<!-- Redactor -->
<link rel="stylesheet" type="text/css" href="/assets/54ed052f/imperavi-redactor/redactor.css"/>
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<script src="/themes/p35/js/jquery.ba-bbq.js"></script>
<script>window.jQuery || document.write('<script src="/themes/p35/js/jquery-latest.min.js"><\/script>\
<script src="/themes/p35/js/jquery-ui.min.js"><\/script>')</script>
<script>jQuery(document).ready(function($){ $('img').removeAttr('width height'); });</script>
<script src="/themes/p35/js/responsiveslides.js-v1.53/responsiveslides.min.js"></script>
<script src="/themes/p35/js/jquery-mobilemenu.min.js"></script>
<script src="/themes/p35/js/custom.js"></script>
<!-- Redactor -->
<script src="/assets/54ed052f/imperavi-redactor/redactor.min.js"></script>
<script src="/assets/54ed052f/imperavi-redactor/lang/es_ar.js"></script>
</head>
Notice how redactor.css, redactor.js and es_ar.js are included twice... The first time each file is included is because of using the regular import() method. The second time they are included is beacuse of manually modifying the template to include them.
I could forget about importing the module regularly, and just changing my theme to load required files all other libs, but I don't like it, and also it would be always loading a library that is only used in a few views.
Any idea of how could I manage to make the import() method work for me?
I can't tell from your code whether you're already using it, but I'd personally recommend the Yii-redactor extension. It handles all the registration of script files for you, all you do it create a redactor widget.
See here http://www.yiiframework.com/extension/redactor/
I am trying to merge two html heads by php include()-ing a php file (which contain the header for reusability) into another. The code works but it results into this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./css/custom-theme/jquery-ui-1.10.3.custom.min.css">
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="./js/jquery191.js" ></script>
<script type="text/javascript" src="./js/jqueryui1103.js" ></script>
</head><html>
<head>
<title>Add Employee Form</title>
<link rel="stylesheet" type="text/css" href="./css/addform.css">
<script type="text/javascript" src="./js/talentform.js" ></script>
<script type="text/javascript" src="./js/form_submission.js" ></script>
</head>
Which is I think against the standards. Is there a way of merging those two heads into one without violating the standards? By the way, I am using CodeIgniter 2 Framework, if it helps. Thanks!