I am now trying to use javascripts in my project. I searched all this morning on the Internet, and found nothing really clear about Laravel and Javascript.
Can somebody please explain how exactly (or link me from a known real example), can we make javascripts working on a Laravel project ? Thanks
Here's what i tried :
template_mynet.blade.php
...
{{ HTML::script('assets/js/jquery-2.1.1.js') }}
{{ HTML::script('assets/js/bootstrap.min.js') }}
{{ HTML::script('assets/js/bootstrap.js') }}
{{ HTML::script('assets/js/accueil_hover.js') }}
...
accueil.blade.php
#extends('template_mynet')
#section('content')
<div class="container">
<a id="popoverData" class="btn" href="#" data-content="Popover with data-trigger" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover">Popover with data-trigger</a>
<a id="popoverOption" class="btn" href="#" data-content="Popup with option trigger" rel="popover" data-placement="bottom" data-original-title="Title">Popup with option trigger</a>
</div>
#stop
accueil_hover.js
$('#popoverData').popover();
$('#popoverOption').popover({ trigger: "hover" })
Where are my js files ?
/public/assets/js
What are my files ?
accueil_hover.js
bootstrap.js
bootstrap.min.js
jquery-2-1-1.js
npm.js
Links are here, but the hovering is not working !
This code is from the example linked here :
http://jsfiddle.net/9P64a/
You should put your javascript in a document ready function. You javascript code won't work because the document isn't fully loaded yet.
change the javascript code to the following:
$(document).ready(function(){
$('#popoverData').popover();
$('#popoverOption').popover({ trigger: "hover" });
});
If this is still not working, please provide the full html output of your site and any console errors.
I had a weird problem though. The title of the question is the exact same thing but I had document ready function. The culprit was something else and it fixed by commenting out
app.js
asset.
Related
I have been using some of the examples from the Angular router guide (with lazy loading) per the link: https://angular.io/docs/ts/latest/guide/router.html
I am unable to get the Plunker example to run. This is the link to my copy of the example: https://plnkr.co/edit/a4ACZxIxKz0kD2AOZYjL?p=preview. The only changes I have made have been to add a app/app.component.html file.
Does anyone know if there is a problem with this code? If so, what needs to be done to make it work? If the code is fine what could I be doing wrong that would not allow me to run the code? I have run many Plunker examples before.
Once I get this code to work I then want to change it to have components use the templateUrl property so I can demonstrate another problem I am having with routing.
Code for the HTML is:
<h1 class="title">Angular Router</h1>
<nav>
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
<a routerLink="/admin" routerLinkActive="active">Admin</a>
<a routerLink="/login" routerLinkActive="active">Login</a>
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
</nav>
<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>
I am new to Meteor (and javascript) and trying to figure out how to integrate the Codrops sidebar menu found here: Codrops. I have created a "sidebar" template and all scripts are loading correctly.
I have the following HTML code:
<div class="morph-button morph-button-sidebar morph-button-fixed">
<button type="button"><span class="icon icon-cog">Settings Menu</span></button>
<div class="morph-content">
<div>
<div class="content-style-sidebar">
<span class="icon icon-close">Close the overlay</span>
<h2>Settings</h2>
<ul>
<li><a class="icon icon-camera" href="#">Default filters</a></li>
<li><a class="icon icon-server" href="#">Storage Use</a></li>
<li><a class="icon icon-heart" href="#">Favorites</a></li>
</ul>
</div>
</div>
</div>
</div><!-- morph-button -->
And this javascript code for the Meteor callback:
Template.sidebar.events({
'click .morph-button': function () {
$('.morph-content').transition();
}
});
Template.sidebar.rendered = function () {
$('.morph-content').transition();
};
I am having trouble understanding how this works. I am getting funny results. Help much appreciated!
I was having trouble finding much documentation on the menu you are talking about. So I am going to take a more JS approach to answering this question.
Under events you are attaching transition() to $('.morph-content'), which you have already done when the DOM was rendered. I would assume that the one doesn't belong. You may just need to attach it under rendered, and the included JS may attach everything else it needs to the DOM(i.e. when you add $('.date').datepicker() to an HTML element.
I'm working on a vanilla javascript project so I cannot use jQuery. I'm trying to use the following to move some HTML from one placement to another:
parent.appendChild(element);
I'm trying to place the forms into a different placement as I placed in the comment in my HTML code. I'm trying this but it's not working at all.
Javascript:
var loginButton = document.querySelector('[data-login-header-button]');
var loginDropdown = document.querySelector('[data-login-dropdown]');
var shopCartButton = document.querySelector('[data-shopping-cart-header-button]');
var shopCartDropdown = document.querySelector('[data-shopping-header-cart]');
shopCartButton.parentNode.appendChild(shopCartDropdown);
loginButton.parentNode.appendChild(loginDropdown);
HTML:
<header>
<nav data-nav-services>
<ul class="nav-services">
<li data-test>
<a class="icon icon-shopping-cart icon-arrow-down" href="#" data-shopping-cart-header-button>
shopping cart
</a>
<!-- PLACEMENT FOR data-shopping-header-cart -->
</li>
<li>
<a class="icon icon-user icon-arrow-down" href="#" data-login-header-button>
Login
</a>
<!-- PLACEMENT FOR data-login-dropdown -->
</li>
</ul>
</nav>
<form class="login-dropdown" data-login-dropdown>
...CONTENT...
</form>
<form class="shopping-cart" data-shopping-header-cart>
..CONTENT..
</form>
</header>
The strange thing is that if I turn around the selectors (as here below) it does work and I cannot explain why...
shopCartDropdown.parentNode.appendChild(shopCartButton);
shopCartDropdown.parentNode.appendChild(loginButton);
When you do:
shopCartButton.parentNode.appendChild(shopCartDropdown);
loginButton.parentNode.appendChild(loginDropdown);
It actually works. It is just not showing anything since the forms are empty. Check your Dev Tools and inspect your HTML.
For anybody who wish to know, the code was perfect. The issue was that I was appending this form elsewhere of my code. So there was a conflict as one had a priority over the other. I could use .cloneNode(true) as a solution. I ended transforming that appending to my new goal and solved the issue.
Anybody out there... check all the code for any other appending of the same element. Good advice ;)
I am using a Bootstrap dropdown menu. The problem is that it never drops down upon the first click; I need to click 2 times for it to be toggled. I guess the click event is somehow getting stuck somewhere before propagating down...
Is there any way to fix that?
If someone is using angular with ui-bootstrap module along with normal bootstrap HTML dropdown definition, there are also two clicks needed.
<li class="dropdown">
Dropdown
[...]
</li>
=> Removing the data-toggle="dropdown" will fix the issue.
Opening the dropdown with one click will work after this.
Reference:
https://github.com/angular-ui/bootstrap/issues/2294
In Bootstrap 4, bootstrap.min.js and bootstrap.bundle.min.js now conflict in dropdown.
By removing bootstrap.min.js, the dropdown double click issue will resolved.
This may happen if somehow Bootstrap is included twice in your project.
If bootstrap.min.js and bootstrap.bundle.min.js(bootstrap and popper js) both included in project, it means redundant bootstrap js.
The js combination should be like this:
Either : bootstrap.bundle.min.js only
Or : bootstrap.min.js AND popper.min.js
For detailed information, visit https://getbootstrap.com/docs/4.1/getting-started/contents/
In BootStrap 4, One should not include both "bootstrap.bundle.min.js" and "bootstrap.min.js". This will cause the DropDown issue. Only Keep "bootstrap.bundle.min.js" as it will have all required code.
This happens because the Twitter Bootstrap syntax for their drop downs include a href tag. You will need to preventDefault and stopPropagation to prevent this from happening. Something like this will do the trick:
$('.dropdown-toggle').click(function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
Like #rajaneesh-singh told us above, this bug occurs when Bootstrap is included twice.
In my case, I had a duplicate with the offical bootstrap and with the twitter version:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js"></script>
I just removed the twitter version and everything is working well now.
I had the same issue as jaybro in https://stackoverflow.com/a/27278529/1673289, however their solution didn't help.
The way to fix for both cases was to add:
data-disabled="true"
onto the element which has the data-toggle="dropdown" attribute.
I solved the issue by removing link to bootstrap.bundle.js and adding a link to popper.js
Before
<script src="bootstrap/jquery/jquery.js"></script>
<script src="bootstrap/js/bootstrap.bundle.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
After
<script src="bootstrap/jquery/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
Note that I downloaded the bootstrap files and stored them in a directory called 'bootstrap'. Inside it I had three different directories 'css', 'js', 'jquery'.
if use bootstrap4, remove bootstrap.bundle.min.js.
I had the same problem and it was fixed
In my case, the other answers don't work.
In application.js, I had:
//= require popper.min
//= require bootstrap-sprockets
Removing bootstrap-sprockets fixed the problem.
This may also happen if you have more than one bootstrap.js files! Check if you still have an older version and remove that script.
By looking within the source code of angular.ui.bootstrap and the native bootstrap.js they have both handlers for dropdowns.
Proposed Solution:
adjust angular.ui.bootstrap dropdownToggle directive restrict only to "A" attributes.
so by resolving this issue you need to modify dropdownToggle restrict "CA" into "A" this will hide Class looker from angular.ui.bootstrap which has been already handled by bootstrap.js
for the minified version of angular.ui.bootstrap look for this line
directive("dropdownToggle",function(){return{restrict:"CA",require:"?^dropdown",link:function(a,b,c,d){
replace "CA" with "A".
Cheers
I came across the same issue recently, i solved it by writing custom script:
<div class="filter-dropdown text-right">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Edit</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
$(".filter-dropdown").on("click", ".dropdown-toggle", function(e) {
e.preventDefault();
$(this).parent().addClass("show");
$(this).attr("aria-expanded", "true");
$(this).next().addClass("show");
});
I found that on some pages I would have to double click and other pages were single click.
Removing data-toggle="dropdown" made the double clicks into single and broke the singles.
I compared the html in the dev tool (because the same html is being served) and found on my double click pages the div with data-toggle looked like this:
<div id="notifications" data-toggle="dropdown" class="dropdown-toggle"
aria-haspopup="true" aria-expanded="false">
But the single click html looks like this:
<div id="notifications" data-toggle="dropdown" class="dropdown-toggle">
So, in the document ready, I used attr detection and the prevent default answer and it made my double click opens into single click opens:
if (!($('#notifications').attr('aria-haspopup') == undefined &&
$('#notifications').attr('aria-expanded') == undefined))
{
$('.dropdown-toggle').click(function (e) { return false; });
}
I'm using Fancybox to display inline content (a div with an image linked to a new page). The div and image display fine in the modal, but when the image is clicked to go to the new page, I get "The requested content cannot be loaded. Please try again later." error.
The FancyBox javascript is as follows:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox().hover(function() {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave( function() {
$("#fancybox-overlay").click();
});
});
</script>
And applies to the following clip of HTML:
<li class="fancybox-outer">
<a id="inline" href="#hover-image_0" class="fancybox">
<img src="http://website.com/file/id:63" style="margin-top: 32px" />
</a>
<p>1G2A</p>
<div style="display: none;"><div id="hover-image_0"><img src="http://website.com/file/id:64/ext:.png" class="img" /></div></div>
</li>
<li class="fancybox-outer">
<a id="inline" href="#hover-image_1" class="fancybox">
<img src="http://website.com/file/id:60" style="margin-top: 32px" />
</a>
<p>17</p>
<div style="display: none;"><div id="hover-image_1"><img src="http://website.com/file/id:61/ext:.png" class="img" /></div></div>
</li>
Does anyone see what might be causing the issue or what I need to correct?
Thanks!
Update: 1/19/2012 - I performed the same test on my server as the first answer (http://estorkdelivery.com/example/example.html) and found that I got the same response back. So it seems it's something with my server.
I still need help with this issue. Anyone have any ideas?
Thanks!
Update: 1/28/2012 - I've been working to find a solution for this problem, but I've run out of time and have gone with a completely different solution. I'm keeping this problem open in case anyone else runs across the same error or ultimately finds a solution. Thanks!
Your approach has many issues:
First bear un mind that fancybox gets its content from the href attribute of any selector bound to it so the link
<a class="fancybox" href="{target}" ...
should be bound to fancybox via the following script in order to work
$('.fancybox').fancybox();
Pretty obvious but in your approach, the link inside the opened fancybox (which targets to yahoo for instance) is not bound to fancybox itself; it will try to fire Fancybox for sure again but with no indication of what the content should be this time, hence the error "The requested content cannot be loaded. Please try again later." in other words, the link (inside the inline content) <a href="http://yahoo.com" ... is not bound to fancybox.
The only way that links inside fancybox can work and load content dynamically (without being bound to fancybox) is when the current content is an external html document and fancybox type was set to iframe (not your case)
Second, you opened an image so fancybox set the type to image by default, but then you are pretending to load a different type of content on the same box (yahoo for instance), which would require to set type to iframe and other options like width and height.
Third, since you are using inline content, please be aware of an existing bug in v1.3.x and its workaround to avoid further issues, you can learn more here
Last, I am not just lecturing here, it's more like the explanation of what is going on with your issue .... but the good news is that you just need to add some more lines of code to make it work the way you want:
1: you need to create a fancybox script for each type of content you want to open the second time (additionally to your existing one), so in your example you want to click the image inside fancybox and that should open yahoo ... then create this script
$('.fancyframe').fancybox({
'type':'iframe',
'width': 600, //or whatever you want
'height': 300
});
2: within your hidden inline content set that class to the link, so this code:
<div style="display: none;">
<div id="hover-image_0">
<img src="1_b.jpg" class="img" />
</div>
</div>
now should look like
<div style="display: none;">
<div id="hover-image_0">
<a class="fancyframe" href="http://www.yahoo.com"><img src="1_b.jpg" class="img" /></a>
</div>
</div>
Do the same for each hidden inline content. If you want to open another type of content in fancybox, just create a script accordingly. The rest of your code is OK (doesn't bother me to fire fancybox on hover)
SIDE NOTES: sites like google, yahoo, jquery and some others won't open in fancybox. Also make sure you have the proper DOCTYPE for fancybox to work properly (your sample page doesn't have any). See Unable to load google in iframe in fancybox for explanation.
I think I've figured out what's causing this issue, at least for me.
The problem seems to occur when you've got a class on one of your elements that is the same as the popup class.
For instance:
<a class="popup" href="#">Open the popup</a>
And you have something in your popup with the same class name, for instance:
<div class="popup">some text</div>
You'll get the error. Try changing the div class to something like popup-window - that should fix your error
In your example page, it works for me if I don't click. When you click, what page are you supposed to be taken to? Do you want it to just go to the next image?
In my personal preference, I don't care for the activation on hover. It gets really confusing, especially when most people go to instinctually click on an image. But in your case it opens on hover, then they click instinctually, then you get the error.
Do you get this same error when you're just using the functionality as it normally applies?
If you want, try to give each image a gallery name instance like so: rel="gallery" and see what happens. You should get the next/prev arrows showing up and working like you would expect.
But honestly, I would get rid of the hover functionality altogether. Or at least get rid of the mouseout() That's probably the most bothersome part.
Just use this to call the fancybox actions:
$("a[rel=gallery]").fancybox();
That way you can get rid of all of those classes that are probably causing the issues.
I hope that helps.
I just ran into this issue as well.
As it turns out, the href url is EXTRA case sensitive. (if that is possible)
Regardless double, triple check your href urls to insure that you have the case exactly correct.
my solution was:
<script type="text/javascript">
jQuery(document).ready(function() {
$(".fancybox").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'titleShow' : false,
'showCloseButton': true,
'titlePosition' : 'inside',
'transitionOut' : 'none',
'title' : '',
'width' : 640,
'height' : 385,
'href' : this.href,
'type' : 'iframe',
'helpers' : {
'overlay' : {'closeClick': false}
}
});
return false;
});
});
</script>
If some of the images are showing and others are not, even though the markup is identical, then check this:
Try to lowercase all the letters in the filename and in the html. Fancybox seems to be quite case sensitive.
Check if the image has all the permissions allowed. I noticed my pictures didn't work properly on mobile because on my computer, everybody's permission was set to "no permission". I changed this to "read only" and it worked like a charm!
I just re-created your test on my local machine and it works fine for me (I ran this from the demo folder of the FancyBox install) :
<html>
<head>
<title>jQuery Fancybox Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css" media="screen" />
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox().hover(function () {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave(function () {
$("#fancybox-overlay").click();
});
});
</script>
<li class="fancybox-outer"><a id="inline" href="#hover-image_0" class="fancybox">
<img src="1_s.jpg" style="margin-top: 32px" />
</a>
<p>
Go to Yahoo</p>
<div style="display: none;">
<div id="hover-image_0">
<a href="http://www.yahoo.com">
<img src="1_b.jpg" class="img" />
</a>
</div>
</div>
</li>
<li class="fancybox-outer"><a id="inline" href="#hover-image_1" class="fancybox">
<img src="2_s.jpg" style="margin-top: 32px" />
</a>
<p>
Go to Google</p>
<div style="display: none;">
<div id="hover-image_1">
<a href="http://www.google.com">
<img src="2_b.jpg" class="img" /></a></div>
</div>
</li>
</body>
</html>
I having the same problem with Fancybox. You cannot have spaces or special character in href and div id. Use an URL slug if you are using page titles.
I was checking out all the possibilities and ran into the EXTRA case sensitivity issue as #BrettBumeter mentioned.
In fact, it is "so much case sensitive", I had to revrite the URL (href) path to my images from *.jpg to *.JPG (or whatever your file type extension might be).
Altering this solved my issue.
Don't apply the fancybox class to your LI element, do it to your A element.
I, after taking the above advice, changed ".png" to ".PNG" in the href. NOTE that the file names are a lower case extension but it only works with upper case extension in the href (rest of filename same)
Hope this helps.
My problem was giving inappropriate path to image e.g;
<a data-fancybox="gallery" href="../dist/imgs/nature/n1.png">
<img src="../dist/imgs/nature/n1.png"></a>
While the images loaded well locally, It could not do online.
Correcting the path solved the problem.
<a data-fancybox="gallery" href="imgs/nature/n1.png">
<img src="imgs/nature/n1.png"></a>
If you are trying to make Fancybox work with dynamic content, you may check this.
I was using the following code:
<a class="video__overlay" data-fancybox="gallery" href="<?= $blog_url ?>"></a>
My issue was that I was generating $blog_url dynamically, looking at a specific text file line, so a \n was being added at the end of $blog_url, without me noticing this.
So, I used trim() and everything works as expected.