In my main tag, I have implement the images for my slide banners.
<main id="main-site">
<!-- Owl Carousel code-->
<section id="banner-area">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="./images/banner.png" alt="Banner1">
</div>
<div class="item">
<img src="./images/banner2.png" alt="Banner2">
</div>
</div>
</section>
</main>
and I have initialize the Owl Carousel on Javascript.
$(document).ready(function() {
$("#banner-area.owl-carousel").owlCarousel( {
dots: true,
items: 1
});
});
And linked the javascript and also the Owl Carousel jQuery plugin to access the javascript file.
<!--Owl Carousel JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"
integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--Custom JS-->
<script src="./index.js"></script>
But even after all these. I still didn't get any banner on my page... what's the problem?
Screenshot
Edit: I was able to fix it. but I only can fix it when I delete the #banner-area, but I wish to fix it without deleting the id.
You should add a space here :
$("#banner-area .owl-carousel").owlCarousel( {
Related
As the title says, I am implementing the Masonry in certain part of my wordpress website.
You may check it out here and find the image below:
In the image above, that's the place I'm trying to implement the masonry.
The codes for masonry in here:
Fiddle
$(window).load(function(){
$('.tentofifteen').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 1,
});
});
.grid-item {
float: left;
}
.grid-superloop-ten {width:319px; min-height:700px;background:#CCC;}
.grid-superloop-eleven {width:220px; min-height:350px; background:#009;}
.grid-superloop-twelve {width:437px; min-height:350px; background:#F36;}
.grid-superloop-thirteen {width:337px; min-height:350px; background:#CC9;}
.grid-superloop-fourteen {width:319px; min-height:350px; background:#0F0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<div class="tentofifteen">
<section class="grid-superloop-ten grid-item" id="wired-superloop">
</section>
<section class="grid-superloop-eleven grid-item" id="wired-superloop">
</section>
<section class="grid-superloop-twelve grid-item" id="wired-superloop">
</section>
<section class="grid-superloop-thirteen grid-item" id="wired-superloop">
</section>
<section class="grid-superloop-fourteen grid-item" id="wired-superloop">
</section>
</div>
It works right?
The problem is, when I start COPYING the same exact codes from jsfiddle to dreamweaver, nothing is happening. What's wrong? Am I missing something?
In your posted code you are loading masonry twice.
On your site, you are loading masonry before jQuery but calling it with a jQuery function so you need to load your scripts like this instead of the way they are currently.
<script src="https://code.jquery.com/jquery-2.1.3.js" type="text/javascript" language="javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js" type="text/javascript"></script>
BTW, you site is loading 2 versions of jQuery, 1.11.3 and 2.1.3. You need to load just one.
I've an HTML page with two Fotorama slideshows, one in the top and another in the bottom of the page.
I can't use the keyboard to move between photos for the second slideshow, even if I click with the mouse on the second slideshow trying to get the focus.
I tried also with the API with no results.
Here's the code:
<!-- Link to jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- fotorama.css & fotorama.js. -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
<!-- First slideshow -->
<div id="fotorama1" class="fotorama" data-keyboard="true" data-arrows="true">
<img src="http://s.fotorama.io/1.jpg">
<img src="http://s.fotorama.io/2.jpg">
<img src="http://s.fotorama.io/3.jpg">
</div>
<!-- Second slideshow -->
<div id="fotorama2" class="fotorama" data-keyboard="true" data-arrows="true">
<img src="http://s.fotorama.io/4.jpg">
<img src="http://s.fotorama.io/5.jpg">
<img src="http://s.fotorama.io/1.jpg">
</div>
Can anyone suggest me a solution?
Thanks in advance,
Luca
I have strange problem with colorbox, the code I have is like:
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
<img
src='/someimage.jpg' height="100px" width="100px"
onclick='$.colorbox({inline:true, href:"#inline_content"});' />
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
Some test inline
</div>
</div>
So, first time I click, it fades the page and opens me hidden content as popup, but when I close that popup, then click on the image again, second and all further times, it just fades the page, but doesn't show me popup with hidden content. What it could be? Appreciate any help. Thanks!
Found the problem, I used minified version
<script src="jquery.colorbox-min.js"></script>
when I changed to normal version
<script src="jquery.colorbox.js"></script>
it started to work.
I have been pulling my hair out trying to get functional smooth scrolling to ids on the same page. I have tried just about every solution I have found on google. I get to a point where when it seems everything should work but then even the basic non-js id linking breaks. I am currently using the smooth-scrolling plugin downloaded from the jquery website. The code as it currently stands is such. I don't know a ton about JS or Jquery so I assume I am just missing something. I inspecting the code on functional versions of the smooth scrolling but even when
I do the in-page linking breaks entirely:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simon Moon Landings</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Noticia+Text:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.smooth-scroll.js"></script>
<script>
$(document).ready(function() {
$('ul.mainnav a').smoothScroll();
});
</script>
</head>
<body>
<div class="container">
<div class="menu">
<nav>
<ul class="mainnav">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</nav>
<img class="logo" src="images/smlogo.gif" width="450" height="288" alt="Simon Moon Landings Logo" onmouseover="on();" onmouseout="off();"></nav>
</div>
<div class="content">
<div class="section" id="one">
<h4>One</h4>
</div>
<div class="section" id="two">
<h4>Two</h4>
</div>
<div class="section" id="three">
<h4>Three</h4>
</div>
<div class="section" id="four">
<h4>Four</h4>
</div>
<div class="section">
<a id="five"><h4>Five</h4></a>
</div>
<div class="section">
<a id="six"><h4>six</h4></a>
</div>
</div>
</div>
</body>
</html>
I found the problem. It was not in the script at all, but in the CSS. I have a two column layout, the menu and anchors are in one column (.menu) and the target divs are in another column (.content) I applied poisiton:fixed to the menu and it started working.
It works fine here.
Make sure that the URL of jquery-smooth-scroll is correct.
I used this copy of jquery-smooth-scroll to test your code: https://github.com/kswedberg/jquery-smooth-scroll
It works for me. See this example: http://jsbin.com/ixefet/1/edit
All I did was change the src for the smooth scroll JavaScript to the online version (https://raw.github.com/kswedberg/jquery-smooth-scroll/master/jquery.smooth-scroll.min.js) and add some text so you can see the scrolling happen.
Sounds like you're using the wrong src for your smooth scroll script (if that's the case, your JavaScript error log should say undefined function: $.smoothScroll or something like that).
It worked for me while testing on jsfiddle,
here you go
http://jsfiddle.net/mastermindw/XvV9W/1/
I'm trying to install SoundManager's 360Ui player.
But i cant seem to nail it.
This is the jQuery code in my header:
<script type="text/javascript" src="wp-content/themes/medium/includes/js/soundmanager2-nodebug.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/excanvas.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/berniecode-animator.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/360player.js" charset="utf-8"></script>
...
<script type="text/javascript">
//some soundmanager settings
soundManager.url = 'wp-content/themes/medium/swf/';
soundManager.flashVersion = 9;
soundManager.useHTML5Audio = true;
soundManager.debugMode = false;
</script>
And the HTML call:
<div class="ui360">
<!-- dynamically-inserted block -->
<div class="ui">
<canvas class="sm2-canvas"></canvas>
<span class="sm2-360btn"></span>
<div class="sm2-timing"></div>
<div class="sm2-cover"></div>
</div>
<!-- /UI -->
<a href="http://**.**.**.**:8000/live">
</div>
For some reason the small play button appears and a second later disappears.
I'm looking to place the big player demo but i cant seem to
properly initiate that player.
All js files and css files from Demo folder are registered.
My Website
Its supposed to appear on the left panel.
if you examine the firebug console you will see that a GET request to http://tranceil.fm/new/readerPlayer.php return a 301 redirect, that might be causing the issue
I know this was asked a couple of years ago, but I was stuck on the same thing and here is how I solved it.
There is a second CSS file called 360player-visualization.css that you need to include.
<link href="360-player/360player.css" rel="stylesheet">
<link href="360-player/360player-visualization.css" rel="stylesheet">
Then in the HTML, include ui360-vis class name as well.
<div class="ui360 ui360-vis">
</div>
Just as you had it, you should also have a custom CSS to increase the size of the player:
.ui360,
.sm2-360ui {
width:250px;
height:250px;
}
And as you had it, the three required JS files:
<script src="360-player/script/berniecode-animator.js"></script>
<script src="soundmanager2-nodebug-jsmin.js"></script>
<script src="360-player/script/360player.js"></script>