twitter bootstrap carousel not working properly ( symfony2 project ) - javascript

when loading the page , my console says:
$('.carousel').carousel is not a function
the generated html source code (i use symfony & twig files) look like this :
<body>
<div class="container">
<div class="row">
<div class="span6 well">
<div id="myCarousel" class="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img alt="" src="/projet_etienne_auth/web/bundles/etiennepsav/images/carousel1.jpg"></div>
<div class="item"><img alt="" src="/projet_etienne_auth/web/bundles/etiennepsav/images/carousel2.jpg"></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap.js" type="text/javascript" media="all" ></script>
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/jquery-1.8.3.js" type="text/javascript" media="all" ></script>
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap-carousel.js" type="text/javascript" media="all" ></script>
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap-transition.js" type="text/javascript" media="all" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel() ;
});
</script>
Would anyone spot what's wrong?
cheers

change your javascript at the end to the following..
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap.js" type="text/javascript" media="all" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel();
});
</script>
the jquery library needs to be the first script file included, then the bootstrap.js file.
Only include the following script files if you didnt include them all within the bootstrap download package..
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap-transition.js" type="text/javascript" media="all" ></script>
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap-carousel.js" type="text/javascript" media="all" ></script>

There seems to be a double entry to your jquery libraries.
Also, move the jquery.min or jquery-1.8.3 to the first line (and remove one of them too, because they are essentially the same).

at the end i have downloaded again boostrap.js including the carousel at
http://twitter.github.com/bootstrap/customize.html
put in my html head like this
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script rel="javascript" href="{{ asset('bundles/etiennepsav/js/bootstrap.js') }}" type="text/javascript" media="all" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel();
});
</script>
i have deleted the whole web folder from my symfony projet
then reloaded it using the console command
php app/console assets:install web

Related

How to count number of clicks on an Image in HTML?

Written the following code to get the required result:
html file:
<div class="container">
<img id="myImg" class="img-fluid img-thumbnail" src="cat.jpg" alt="cat img">
</div>
JS File:
$(function() {
let i = 0;
$('#myImg').click(function() {
$(this).html(i++);
});
});
But, the console show error as follows:
Uncaught ReferenceError: $ is not defined
at script.js:1
Could you please help me to resolve this problem and explain to me why does this happen. And how can I know the number of click increment or not?
Click here for codepen link of my work.
Uncomment your link to jquery file i.e <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> and include your script.js after jQuery file. You are getting error because your <script src="script.js"></script> is before jquery. All you JavaScript which use jQuery must be after your jQuery file.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Click Cat | Sofia </title>
</head>
<body>
<div class="container">
<img id="myImg" class="img-fluid img-thumbnail" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/adorable-cat.jpg" alt="cat img">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Optional JavaScript -->
<script src="script.js"></script>
<script>
$(function(){
let i=0;
$('#myImg').click(function(){
$(this).html(i++);
console.log(i);
});
});
</script>
</body>
</html>
$(document).ready(function(){
var i = 1;
$('#myImg').click(function(){
alert(i++); // here you can use html or whatever you want.
});
});
remove the alert and use whatever you want
It looks like you are trying to use jQuery in your javascript code, but you may not have properly included the jquery script file in your HTML.
You can load it in the head of your document from a cdn like this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
After the jQuery script is included, you may want to modify your HTML to have an element that will hold the count (not the img element):
<div class="container">
<span id="click-counter">0</span>
<img id="myImg" class="img-fluid img-thumbnail" src="cat.jpg" alt="cat img">
</div>
Then adjust your js code:
$(function() {
let i = 0;
$('#myImg').click(function() {
i++;
$('#click-counter').text(i);
});
});
Here is a fiddle:
https://jsfiddle.net/2zxmhub4/1/

jquery - Making content draggable - not waiting until content in iframe is loaded

Basically I have an image and once image is pressed it injects html into a iframe, I then wanted to make content draggable, however my javascript code is either not waiting for content to be loaded or the is an error with my code.
View:
#extends('layouts.master')
#section('title', 'Best programmer ever')
#section('content')
<script type="text/javascript" src="{!! asset('/js/jquery-3.1.1.min.js') !!}"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="{!! asset('/js/template.js') !!}"></script>
#endsection
#section('template')
<div class= "template_class">
#foreach ($templates as $template)
<a class="content-link" href="{{ asset($template->file )}}">
<img id = "image" src="{{ asset($template->image )}}"/>
</a>
#endforeach
</div>
<iframe id="content-link2"></iframe>
#endsection
#show
Javascript:
$(function(){
$('.content-link').click(function(e){
e.preventDefault();
$('#content-link2').attr("src",$(this)[0].href);
console.log($('#content-link2'));
return false;
});
});
$( function() {
var $currentIframe = $('#content-link2');
$currentIframe.contents().find('#content').draggable();
console.log($currentIframe.contents().find('#content'));
});
Template, this is a stuff loaded into a iframe:
<!DOCTYPE html>
<html>
<head>
<title>Template 1</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="content">Insert your content here</div>
</body>

Javascript is ignoring the CSS inside its <div>

I have a page that is using JavaScript to play mp3 files. The script has its own CSS which controls the look of that specific code. I have another CSS file that controls the look of the overall page. I need this script to fall in my container <div> to keep my pages looking consistent. The script's CSS is correctly altering the JavaScript and the global CSS is also impacting the overall page. The only problem is that the script code ignores the CSS which places it inside the container and content divs. Hence this script shows at the bottom when it should be inside the container before my footer.
How can I get this script to still follow the CSS from the overall page so all my pages are structured the same? When I take out the script code and just type some words, the text shows up in the correct place on the website.
HTML is something like this:
<html>
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" href="plugin/css/style.css">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="plugin/jquery-jplayer/jquery.jplayer.js"></script>
<script type="text/javascript" src="plugin/ttw-music-player-min.js"></script>
<script type="text/javascript" src="js/myplaylist.js"></script>
</head>
<body>
<div id="container">
<div id="header">
//header code
</div>
<div id="nav">
<ul>
//Navigation code
</ul>
</div>
<div id="content">
<script type="text/javascript">
$(document).ready(function(){
var description = 'Example text'
$('body').ttwMusicPlayer(myPlaylist, {
autoPlay:false,
description:description,
jPlayer:{
swfPath:'plugin/jquery-jplayer'
}
});
});
</script>
</div>
<div id="footer">
Copyright 2016
</div>
</div>
</body>
</html>
I think this is what you're looking for. Place the script tag somewhere other than the content (end of the file is usually good... or in a separate file... your choice) and attach the music player to the #content div:
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" href="plugin/css/style.css">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="plugin/jquery-jplayer/jquery.jplayer.js"></script>
<script type="text/javascript" src="plugin/ttw-music-player-min.js"></script>
<script type="text/javascript" src="js/myplaylist.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<!-- header code -->
</div>
<div id="nav">
<ul>
<!-- Navigation code -->
</ul>
</div>
<div id="content">
<!-- content goes here -->
</div>
<div id="footer">
Copyright 2016
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var description = 'Example text'
$('#content').ttwMusicPlayer(myPlaylist, {
autoPlay: false,
description: description,
jPlayer: {
swfPath: 'plugin/jquery-jplayer'
}
});
});
</script>
</body>

Fancybox not working on Prestashop´s product page (Pop-up will appear and leave a 404 error)

Hey to all Prestashop developers! I would like some advice about that matter.
I downloaded the fancybox feature to implement it into the Prestashop´s product.tpl page.
So far, when I enter the product page and click on the zoom magnifier, a pop-up window appears and displays a 404 error URL not found.
Here is the code that I needed to put into the product page (product.tpl). Right after the <img> tag I call on the javascript function:
{if $have_image}
<span id="view_full_size">
<a class="fancybox" href="{$link->getImageLink($product->link_rewrite, $cover.id_image,'fancybox')}">
<img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}"
{if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic" width="{$largeSize.width}"
height="{$largeSize.height}" />
<span class="span_link no-print"></span>
</a>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</span>
{else}
<span id="view_full_size">
<img src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}"/>
<span class="span_link"></span>
</span>
{/if}
The scripts and styles are linked to a folder that I named fancybox and are located at the root directory of the theme. I added them at the beginning after this line of code {include file="$tpl_dir./errors.tpl"}
{if $errors|#count == 0}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="{$fancybox_dir}/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="{$fancybox_dir}/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="{$fancybox_dir}/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" href="{$fancybox_dir}/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="{$fancybox_dir}/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="{$fancybox_dir}/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="{$fancybox_dir}/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="{$fancybox_dir}/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
I have done a lot of research here in Google and in Prestashop's forums but no luck.
My version of Prestashop is 1.5.6.2.
I would be really grateful if you could help me with any solution on the problem.
Thanks,
Orestis

FancyBox won't "pop"

I've been trying for 2 hours to get FancyBox to work and have no clue how it isn't working. Obviously I am missing something because it's just linking to the image.
Example: I link the image to my images folder (both the thumb and the large image), and when I click the image it just takes me to a new page and shows me the image rather than popping up.
Here is my code:
<head>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/jquery.fancybox.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-thumbs.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-buttons.css" media="screen"/>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-media.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancyImg").fancybox();
});
</script></head>
<div class="row">
<div class="col-md-6">
<div class="portfolio-item">
<a class="fancyImg" href="img/portfolio-2.jpg" title="Lorem ipsum dolor sit amet"><img src="img/portfolio-2.jpg" alt="" /></a>
</div>
</div>
First thing I see is your are loading fancybox twice. Pick one.
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.js"></script>
Inside the html body section I added this code
<a class="fancyImg" href="img1.jpg" title="Lorem ipsum dolor sit amet"><img src="img1.jpg" alt="" /></a>
<script type="text/javascript">
$(document).ready(function() {
$(".fancyImg").fancybox();
type:"iframe"
});
</script>
And it seems to be working fine :)

Categories

Resources