This my first time asking question on StackOverflow. :-)
I have a fairly complex page to be displayed involving 20+ pics, 4+ css, 6+ javascript files to be loaded. Because this page is intended to be displayed on mobile phone, I would love it to be pre-loaded (preferably with progress) so to improve user experience. I was looking at some JS libs such as Preload.js but really wondering how I can combine it with my view.
Here are some of the files:
show.blade.php -
#extends('page')
#section('title')
{{ $page->title }}
#stop
#section('header')
#include('pages._navheader')
{!! $page->header !!}
#stop
#section('content')
#include('pages._nav')
{!! $page->content !!}
#stop
#section('footer')
<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
#include('pages._navfooter')
{!! $page->footer !!}
<!-- WeChat Scripts -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
wx.config(<?php echo $js->config(array('onMenuShareTimeline', 'onMenuShareAppMessage'), true, false) ?>);
</script>
<script type="text/javascript" charset="utf-8">
alert('{{ $url }}');
wx.ready(function () {
var shareData = {
title: '{{ Request::session()->get('nickname')}}recommends：{{ $page->title }}',
desc: '{{ $page->description }}',
link: '{{ $url }}',
imgUrl: '{{ $page->thumbnail_url }}'
};
wx.onMenuShareAppMessage(shareData);
wx.onMenuShareTimeline(shareData);
});
wx.error(function (res) {
alert(res.errMsg);
});
</script>
<!-- End WeChat Scripts -->
#stop
$page->header -
<link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/products/style.css">
$page->content - some HTML code for the page (with many graphics)
Also the #inlcude partials contain css/js/html neccessary for navigation menu.
So to load all these files located everywhere seems like a big mess. Is there a way to put them into preload nice and clean? Thank you very much in advance.
This is not laravel specific, but you can instruct the browser to preload a given url in the background. However, this kind of preloading will be likely prevented on mobile phones (for which you aim to gain speed) when on a paid mobile network.
To enable this functionality (modern browsers only), use the link prefetch element, put into the header:
<link rel="prefetch" href="url/to/preload">
The instruct-the-browser expression should be emphasized, as this will let the browser decide whether or not it is feasible to preload the specified URL, thus it might not work instantly. However, you should notice a significant decrease in loading times.
Related
I have this code, and I cant get it to work in my WordPress, I have used the addons Insert Headers & Footers and also WP Coder... but I am not sure why it will not work, the page is just blank.
How can I get this to work? What should I place where in the WordPress site - plugins etc.?
I have tried to place this in the "WP CODER" under "HTML code":
But it does not work, the page is blank.
1) Add the following code to the <head> section of your website:
<link rel="stylesheet" type="text/css"href=”https://zellr.com/integration/kirpparikalle.css” />
2) Add the following code to the section of your page. Place it inside the element where you wish to see the login and registration forms.
<h1 id="kirpparikalle_title"></h1>
<br/>
<div id="kirpparikalle_container"></div>
<!-- Note: jQuery is requirement for the integration scripts.
If you already have jQuery included in your website, you can remove the next line. -->
<script type="text/javascript" ```src="https://zellr.com/integration/jquery.min.js"></script>
<script type="text/javascript" ```src=”https://zellr.com/integration/kirpparikalle_i18n.js"></script>
<script type="text/javascript">
$(function() {
KK_COMPANY = ' denlillelandsoldat ';
KK_CONFIG['redirect_url'] = 'http://denlillelandsoldat.dk/';
KK_LANGUAGE = 'da';
kk_show_default_login();
});
</script>
It should show some booking module on the page.
Try to copy this exact code and paste it where you want it to appear, you have odd characters in the code you've applied on your website. Also the js code might produce an error to made a little change to the wrapper
<link rel="stylesheet" type="text/css" href="https://zellr.com/integration/kirpparikalle.css" />
<div id="kirpparikalle_container"></div>
<!-- Note: jQuery is requirement for the integration scripts.
If you already have jQuery included in your website, you can remove the next line. -->
<script type="text/javascript" src="https://zellr.com/integration/jquery.min.js"></script>
<script type="text/javascript" src="https://zellr.com/integration/kirpparikalle_i18n.js"></script>
<script type="text/javascript">
(function($) {
$(function() {
KK_COMPANY = ' denlillelandsoldat ';
KK_CONFIG['redirect_url'] = 'http://denlillelandsoldat.dk/';
KK_LANGUAGE = 'da';
kk_show_default_login();
})( jQuery );
</script>
Are you using block editor (gutenberg) or the classic editor?
In classic editor. Paste your codes inside text editor
Same concept in gutenberg tho.
I have CSS and JS files that must only load on certain very specific views in Laravel 5.2.
My boss decided to drop RequireJS which we used to load JS files on our blade templates. Now, we are trying to load dependencies on a native manner.
This is my code:
#extends('layouts.app')
<link href="{{ URL::asset('assets/css/slick.grid.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/css/examples.css') }}" rel="stylesheet">
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
loadscript('assets/js/jquery.event.drag-2.3.0.js');
loadscript('assets/js/slick.rowselectionmodel.js');
loadscript('assets/js/slick.core.js');
loadscript('assets/js/slick.grid.js');
});
</script>
#section('page')
//the rest of page
And my "loadscript" function does this:
function loadscript(url, callback)
{
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
head.appendChild(script);
};
This does work, but it feels quite slow, I believe there must be a much better way to have specific css and js file load with laravel on whichever view we want.
It's really important to have the css and js files load only on certain views.
Laravel 5 - Add a stylesheet only if on a certain page/controller (page specific asset)
#extends('layouts.master')
#section('styles')
<link href="{{asset('assets/css/custom-style.css')}}" />
#stop
If you don't like the #section() idea and just want the dynamic scripts in one place, check out my detailed answer here:
Laravel 5 - Add a stylesheet only if on a certain page/controller (page specific asset)
In summary, using named routes:
<!-- In layout template -->
#if (in_array(Route::currentRouteName(), ['profile', 'register']))
<script src="example.js"></script>
#endif
Hey all I am having a huge problem here evenafter following every step of the tutorial given here to put in a video on a popup greybox ..
The tutorial
now, the only change i have made is i have a folder inside the folder graybox called graybox which holds the JS and css files.
so my script code reads like this ..
<script>var GB_ROOT_DIR = "/greybox/";</script>
<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
there is a folder called video which has a video called video.flv.
now I have linked a text to open as shown in the tutorial .. the code is
<a title="Noodle Demo" href="player.html?filename=videos/noodle.flv">Demo</a>
when i click on the link on the web page the window opens up right but the window reads page not found .. I have the required player.html too and that is a copy paste from the tutorial, i;ve changed all the required version numbers of flowplayer etc. Please help me.
Use the rel tag. :)
<a rel="gb_page_center[560, 450]" href="player.html?filename=videos/noodle.flv">
God bless tutorials. For better centering you can get the middle of the site by jQuery for example.
<a rel="gb_page_center[560, 450]" id="player" href="player.html?filename=videos/noodle.flv">
<script type="text=javascript">
$(document).ready(function(){
cenx = $(window).width();
ceny = $(window).height();
$("#player").attr("rel", "gb_page_center["+cenx/2+", "+ceny/2+"]");
});
</script>
But it requires jquery from jquery website.
i am really messing up with this, could somebody help me here, please.
what i am doing? -> I have developed an app in which I need lightbox effect(overlay) i.e when user will enter his name and click the button, he'll be shown a lightbox(simply telling him that process is going on. you need to wait.), he can then close the box.(This is because process may take 5 mins if he is a big user.)
what i have done? -> There are 2-3 previous .js files included in my home.php, and when i implement these lightbox's .js files it doesnot work for lightbox:
Here is my code in home.php:
/this is overall css file
< link rel="stylesheet" href="style.css"
type="text/css" />
//this is for lightbox
<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>
//css for lightbox effect
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
//this is jquerylibrary
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
//this is for ajax script
<script type="text/javascript" language="javascript" src="ajax_navigation.js">
</script>
//this is swfobject.js for piechart
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
function senddata(){
//here is some code for piechart
}
$(document).ready(function(){
$.get('/get_home_data.php', function(data){
$('#get_data').html(data);
});
$("#btn_submit").bind('click', function(){
if($('#tnm').val() != ''){
$('#loadimg').html('<img src="images/ajax-loader(3).gif">');
$('#lightbox').html('<img src="images/image-1.jpg" rel="lightbox" title="my caption">');
$('#loadimg').show();
$('#lightbox').show();
$.get('/userinfo.php?tnm='+$('#tnm').val(), '', function(data){
$('#get_data').html(data);
$('#lightbox').hide();
$('#loadimg').hide();
});
}
});
$('#tnm').bind('keyup', function(e){
if(e.keyCode == 13) {
$("#btn_submit").trigger('click');
}
});
});
</script>
this is so far(sorry for being lengthy), all the div ids are called properly in the body.
Now I am facing? -> I have included these three .js files for lightbox above, but not getting the effect, when i put these .js files at last it doesn't call get_home_data.php and disables click event, but gives the lightbox effect.
I can understand that putting it lastly doesn't execute above jquery part.
i am really struggling hard to get this done and i reached upto this, my whole app is ready just without this lightbox.
I'll really appreciate your help guys.
(and will happily provide more details if required. )
Thank you in advance.
Do you you have the images (with rel="lightbox") already in your page or you are only adding them using the jquery part? In my opinion the initialization of lightbox needs the images to be already in the page. Which implementation of lightbox do you use? This one?
If so, try to call initLightbox(); after your jquery code statements (after the statement that loads the images).
I'm working on a modeling website for my girlfriend and she wants a large slideshow as background on the website. I used the JonDesign Gallery for that, which works nicely for this purpose and is relatively light-weight.
Now, for the contact form I'd like to use something Lightbox/Slimbox style. Slimbox works with Mootools, which is also used by JD Gallery. Unfortunately, Slimbox seems to conflict with JD Gallery and I can't figure out why. I checked the CSS for conflicts, but there are no elements ID'd or class'd twice. I looked at the code and couldn't immediately spot a conflict. I'm sure I missed something. I can't figure it out because I don't have much experience with JavaScript let alone Mootools or Slimbox.
Here's my (relevant) code.
Head
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/mootools.js"></script>
<script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="scripts/mootools-1.2-more.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.transitions.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/slimbox.js"></script>
Body
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false,
delay: 6000,
embedLinks: false,
showInfopane: false,
});
}
window.addEvent('domready', startGallery);
</script>
<div id="myGalleryBox">
Contact her
</p>
</div>
<div class="content" style="z-index:1;">
<div id="myGallery">
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<img src="images/pic1.jpg" class="full" />
</div>
</div>
</div>`
As far as I can tell, the conflict is between these lines:
<script type="text/javascript" src="scripts/mootools.js"></script>
and
<script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="scripts/mootools-1.2-more.js" type="text/javascript"></script>
in the head.
I'm using unmodified code from JD Gallery and SlimBox. Any help would be much appreciated!
The only problem I can see is an extra comma at the end of the gallery options:
var myGallery = new gallery($('myGallery'), {
...
showInfopane: false, <--- Right Here
});
At least Firefox and Chrome ignore the trailing comma, but it's a syntax error in Internet Explorer. After I fixed that, your code worked fine for me in Chrome, Firefox, and IE.
Like Anurag mentioned in the comments, you are including MooTools twice. It didn't cause any problems for me, but you can remove the scripts/mootools.js script, and it should still work.
In JQuery you can choose a new name for the JQuery function to avoid conflicts with other libraries, e.g. Prototype. Mootools might support something similar.
Alright, it's working now. Here's what's going on: I removed the extra comma as per Matthew Crumley's suggestion (+1). Per Anurag, I checked Chrome's developer tool (I completely forgot about that - working late = bad.) It didn't show any errors. Then I redownloaded the SlimBox files and tried the demo, which didn't work. Then I noticed that SlimBox had two folders with its SlimBox JS files: js and src. js is the correct folder with the correct library, src doesn't work for whatever reason. I changed the website to use the file from the js folder and it's now working.
Bottom line: No script conflict after all, SlimBox was just distributed in a weird way. Thank you everybody for your help!
I faced the same issue when I had to use two versions of jquery in the same page.
<script type='text/javascript'>
// This script prevent the conflict between older and newer versions of jquery
var $jq = jQuery.noConflict(true);
</script>
And then you can reference your different version of jquery by using something like this :
var $noborders = $jq('.noborders');
I hope something like this will solve your issue too.