laravel routing css and js scripts - php

I have a laravel project and just wanted to use a simple timer jquery script in it. I created a new folder in views, placed there my code. I also placed there another folder called flip_timer with jquery files.
My problem is that i cannot make the script paths work "not found http exception".
Folder structure looks like this: folder in views > contains file(code below) and folder including all the needed files. Whenever i try to run the link with code the page is empty, and when i click to see the source code and click on the css or js link it shows me the error i mentioned above...
<link rel="stylesheet" type="text/css" href="flip_timer/jquery.flipcountdown.css" />
<script type="text/javascript" src="flip_timer/jquery.min.js"></script>
<script type="text/javascript" src="flip_timer/jquery.flipcountdown.js"></script>
<div id="retroclockbox1">
<script>
jQuery(function($){
$('#retroclockbox1').flipcountdown();
})
</script>
</div>

put your jquery.flipcountdown.css file in inside css folder named: css/flip_timer/jquery.flipcountdown.css
AND
your both js file inside js folder named:js/flip_timer/jquery.min.js and js/flip_timer/jquery.flipcountdown.js and then put below code in your html file.
<link rel="stylesheet" href="{{ URL::asset('css/flip_timer/jquery.flipcountdown.css') }}" />
AND for js file
<script type="text/javascript" src="{{ URL::asset('js/flip_timer/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/flip_timer/jquery.flipcountdown.js') }}"></script>

Related

PHP include menu.php

I have a menu.php where there are the include of css and js library.
I want to create a new file inside a folder admin and "include menu.php".
I tried include "../menu.php", but the references inside menu.php don't change, and obviusly the css and js file are not found.
How can I do?
menu.php
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="./css/bootstrap.min.css" >
<link rel="stylesheet" href="./css/timeline.css">
<script src="./js/jquery-3.3.1.slim.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<!-- DATETIMEPICKER -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/moment.min.js"></script>
Hierarchy
menu.php
-css
-js
-admin -> newfile.php
I am not sure how you are currently referencing the include in your code or how your server is configured but when I do this, I use the following syntax:
<?php include($_SERVER["DOCUMENT_ROOT"] . '/menu.php') ?>
This includes the configured root directory and then concatenates the remaining path at the end.
This might also help.

Bootstrap doesn't show up properly in Laravel Blade

I setup bootstrap files in public folder. Routes are as below:
<link rel="stylesheet" href="{{url('assets/css/bootstrap.min.css')}}">
<script type="text/javascript" src="{{url('assets/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/jquery.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/tether.min.js')}}"></script>
no problem with this. I can see connection to files when I check the source code. and also bootstrap fonts are active but, when I try to copy some examples from bootstrap website. It doesn't display properly. For example I copied navigation bar to my main.blade But it doesn't show up.
What is causing this? Any idea?
It s big screen but showing responsive hamburger icon?
You should add jquery before bootstrap min js file
<link rel="stylesheet" href="{{url('assets/css/bootstrap.min.css')}}">
<script type="text/javascript" src="{{url('assets/js/jquery.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/tether.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/bootstrap.min.js')}}"></script>
The order in which you add javascript in HTML page is important. In this case since bootstrap.min.js uses jquery.min.js jquery must be added first. So when bootstrap loads and looks for jquery it finds it.
But if one script does not depend on another then you can add them in any order.
So add jquery.min.js first then anything that uses jquery(like bootstrap) after it.

Laravel 5: adding custom styles/scripts

This is kind of a stupid question, and I've looked around for similar answers and found some, however they are a bit more specific than what I am asking.
Say I want to include a custom styles.css or scripts.js file, would I just create a css/js folder in resources/views folder, and then call to them in my blade.php files like I would normally do in an HTML file when not using Laravel?
Example: <link type="text/css" rel="stylesheet" href="css/styles.css">
Or is there a different approach to this in Laravel?
Put your css files into the public folder like public/css/styles.css
Use the asset() function to add css, javascript or images into your blade template.
For Style Sheets
<link href="{{ asset('css/styles.css') }}" rel="stylesheet" type="text/css" >
or
<link href="{{ URL::asset('css/styles.css') }}" rel="stylesheet" type="text/css" >
For Javascript
<script type="text/javascript" src="{{ asset('js/scripts.js') }}"></script>
or
<script type="text/javascript" src="{{ URL::asset('js/scripts.js') }}"></script>
You may also be interested to have a look at Laravel's Elixir to process your styles and javascript.
put your style.css file in inside css folder named: /css AND your js file inside js folder named: /jsput below code in your html file.
Your css files
<link rel="stylesheet" href="{{ URL::asset('css/yourstylesheet.css') }}" />
And js files
<script type="text/javascript" src="{{ URL::asset('js/jquery.min.js') }}"></script>

jQuery for HTML to PHP - Function Error

I have just purchased "Tonic Gallery" which my client thinks it's absolutely perfect for his website. The difficulty is that it works great with HTML but for ".php" it won't even load.
To give you a better idea, here two links:
Tonic Gallery Link: http://codecanyon.net/item/tonic-gal...gallery/120710
LincHospitality.com: http://linchospitality.com/
This is inputed into the "Portfolio" tab. As per instructions, I have entered the following into the "head" (header.php):
<link rel="stylesheet" type="text/css" href="styles/tonic_gallery.css"/>
<link rel="stylesheet" type="text/css" href="styles/demo_styles.css"/>
<link rel="stylesheet" type="text/css" href="styles/prettyPhoto.css"/>
<script type="text/javascript" src="script/jquery-1.4.js"></script>
<script type="text/javascript" src="script/jquery-easing.js"></script>
<script type="text/javascript" src="script/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="script/portfolio-setter.js"></script>
<script type="text/javascript">
$(function(){
// init the portfolio functionality
$('#portfolio_wavy').portfolioSetter({xmlSource:'portfolio.xml', wavyAnimation:true});
});
</script>
I had then created the "portfolio.php" page with the required input from the plugin:
<?php $page = "portfolio";?>
<?php include("header.php"); ?>
<div role="main">
<div class="wrapper" id="subPagesWrap">
<div id="portfolio_wavy"></div>
</div><!-- wrapper -->
</div> <!-- end main -->
<?php include("footer.php"); ?>
The in a direct ".html" file, it works perfectly! But since I had placed in the "header.php" and "portfolio.php", I get the following error:
$("#portfolio_wavy").portfolioSetter is not a function
Here is a link to the ".html" files as to how it's suppose to work. Same functions, same root folder just not working in ".php".
linchospitality "/" gallery [dot] html
How do I over come this function error? Any simple methods?
Thanks!
You need to run the function after it has loaded. You can make sure of this by running it on the document ready event. I am not sure of the syntax you are using, but just make sure that it is run after the document ready is fired.

using lightbox with code igniter

I'm trying to use Lightbox with my CodeIgniter application. Lightbox says to put the following in the head tag:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
I already had a js folder and a css folder, so I put the js and css folders that came with lightbox within my js and css folder. I changed the 3 script tags and link tags to:
<script type="text/javascript" src="js/js/prototype.js"></script>
<script type="text/javascript" src="js/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/js/lightbox.js"></script>
<link rel="stylesheet" href="css/css/lightbox.css" type="text/css" media="screen" />
(added the /js and /css)
in the view file I have
<img name="<?php echo $row->Thumb;?>" src="http://www.doublediamondllc.com/uploaded/portfolio/thumbs/<?php echo $row->Thumb;?>" alt="">
This displays the thumbnail version, and then when clicked I want it to go to the lightbox, but now it goes to a new tab with the large image.
I've used lightbox before and have always gotten it to work, I'm not really sure what the problem is now, and I tried moving the files all around to different spots but nothing worked.
Thanks in advance!
It seems like the .js isn't getting loaded properly. Try using Firebug, and see if any errors pop up. Alternatively, check the links in the source for the page, and make sure they are pointing to the lightbox js files correctly. If you are using Firefox, view source; the links to the js files should appear as clickable links; click on them and make sure the js file appears, and not a 404 or some other error. Otherwise copy and paste the link attributes to your browser and check the .js paths are correct.

Categories