I am having difficulties with slicebox. I have checked every idea, followed the tutorial, but I'm missing the animation. I think it just doesn't start up, because the first picture in the slide appears, but nothing happens.
CSS included
<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
JQuery is the latest version
<script type="text/javascript" src="js/modernizr.custom.46884.js"></script>
The html seems right
<div class="wrapper">
<ul id="sb-slider" class="sb-slider">
<li>
<a href="#" target="_blank">
<img src="slider/image1.jpg" alt="image1"/>
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="slider/image2.jpg" alt="image1"/>
</a>
</li>
</ul>
</div>
And just before the /body tag at the end
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.slicebox.js"></script>
<script type="text/javascript">
$('#sb-slider').slicebox({
orientation : 'v',
autoplay : true,
});
</script>
What is wrong? I don't know much about the jquery but I have tried many variables, probably there is something I can't see. I appreciate any help.
Related
I am trying to figure out what and how to do a dropdown menu but I can't find my problem or what I am missing.
When I try to click/tap on the button it doesn't do anything (it doesn't drop anything).
<link rel="stylesheet" type="text/css" href="lib/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
And here's the menu.
<ul id="menu">
<li class="dropdown">
Dropdown<span class="caret"></span>
<ul class="dropdown-menu">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
</ul>
I am really new at this so probably this is a simple problem but I still can't figure it out.
Also if there is a simpler solution or without bootstrap I would like to try them all.
After a lot of googling and trying different approaches I found a way to do what I want.
You should use Bootstrap.css, Bootstrap.js, jQuery.js and Popper.js.
Also you should set crossorigin="anonymous"
<script type="text/javascript" src="lib/js/jquery-3.3.1.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/js/popper-1.14.7.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/js/bootstrap-4.3.1.js" crossorigin="anonymous"></script>
Also about the using of the JavaScripts you can use it this way: (as stated here - Bootstrap website)
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Here's the menu:
<ul id="menu">
<li class="dropdown">
Dropdown<span class="caret"></span>
<ul class="dropdown-menu">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
</ul>
I hope this will help to some people because I found couple of questions similar to mine.
I have created fiddle example using bootstrap js and bootsrap css similar given your code and i have also added fullpage js but dropdown working fine.
Please check here. its working fine. JS and Css file.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.com/libraries/fullPage.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul id="menu">
<li class="dropdown">
Dropdown<span class="caret"></span>
<ul class="dropdown-menu">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
</ul>
I'm trying to use owl carousel in laravel 5.6
I've included the following in the header and footer sections of the layout template
layouts/app.blade.php
<head>
<link rel="stylesheet" href="{{ asset('js/owlcarousel/dist/assets/owl.carousel.min.css') }}">
<link rel="stylesheet" href="{{ asset('js/owlcarousel/dist/assets/owl.theme.default.min.css') }}">
</head>
<body>
<script src="{{ asset("js/jquery/dist/jquery.min.js") }}"></script>
<script src="{{ asset("js/owlcarousel/dist/owl.carousel.min.js") }}"></script>
</body>
I have added the below in the welcome.blade.php
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</script>
I do not see any slider. I see an error in the developer tools console that says
Uncaught ReferenceError: $ is not defined
How to solve this?
The issue is with bootstrap 4. However it works fine with bootstrap 4.1. Hence closing this question.
Hope it helps!
You should link JQuery first like this:
<script src="jquery.js" type="text/javascript"></script>
I am trying to implement lightbox in laravel but it doesn't load the arrows(left,right ...) from the lightbox css file.With Fancybox i have an issue when i click on the image, the size overflows for 1,2s and then it appears at the normal size in the center of the screen(I have image below).The arrows path public/lightbox/img.
Below is my code
default.blade.php
<title>My personal website</title>
<link rel="shortcut icon" href="{{ asset('favicon.png') }}" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/style.css') }}" type="text/css"/>
<link rel="stylesheet" href="{{ asset('css/lightbox.css') }}" type="text/css"/>
</head>
<body>
<div class="container">
<header>
#include('template.partial.nav')
</header>
#yield('content')
</div>
#include('template.partial.footer')
<!-- ***Scripts*** -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="js/lightbox.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{{ asset('js/test.js') }}"></script>
</body>
</html>
portfolio.blade.php
#extends('template.default')
#section('content')
<div id="portfolio">
<div class="row">
<p class="heading">Portfolio</p>
</div>
<div class="row">
<div class="col-md-12">
<p class="subheading">Java application</p>
<hr>
<h2 style="text-align:center">Lightbox</h2>
<a data-lightbox="roadtrip" href="{{ asset('lightbox/img/demopage/rsz_java1.png') }}">
<img src="{{ asset('lightbox/img/demopage/java1.png') }}" width="150" height="100">
</a>
<a data-lightbox="roadtrip" href="{{ asset('lightbox/img/demopage/rsz_java1.png') }}">
<img src="{{ asset('lightbox/img/demopage/java1.png') }}" width="150" height="100">
</a>
</div>
</div>
#endsection
Console errors:
portfolio:1 GET http://{projectname}/img/next.png 404 (Not Found)
portfolio:1 GET http://{projectname}/img/close.png 404 (Not Found)
portfolio:1 GET http://{projectname}/img/loading.gif 404 (Not Found)
portfolio:1 GET http://{projectname}/img/prev.png 404 (Not Found)
Thanks in advance!
Please, upgrade jQuery to the latest (see https://github.com/fancyapps/fancybox/issues/1504)
Also, fancyBox v3 does not use any images, all icons (including loading animation) are created using CSS only. Make sure you are not mixing multiple lightbox scripts.
I will try to keep it simple in database I have 2 fields, name = name of site and html = html code of that site.
Database looks like this:
UPDATE `websites` SET `name` = 'name', `html` = ' <title>Template 1</title> <link href="http://localhost/templates/css.css" rel="stylesheet" type="text/css"> <div class="logo"> <img class="images" id="image" src="#" alt="Your Logo"> </div> <div contenteditable="true" id="content" class="draggable ui-widget-content refresh ui-draggable ui-draggable-handle" style="position: relative; left: 209px; top: 139px;"><p>Change Text inside this box</p></div> <div id="editTxt" class="refresh" contenteditable="true"> <p>This text can be by the user.</p> </div> ' WHERE `websites`.`id` = 1;
Now when I type into browser localhost/website/{name} I would like to append html code from that database into a browser using ajax.
I have started something like this:
Controller:
function websites($name)
{
$websites = Website::all();
return view('layouts/website', ['websites' => $websites]);
$name = $websites->name;
}
Route:
Route::get('website/{name}', 'BuilderController#websites');
website.blade.php:
#extends('layouts.master') #section('title', 'Website Builder') #section('content')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<div class="container template_class ">
#foreach ($websites as $website)
<a class="content-link" href="{{ asset($website->name )}}">
<img src="{{ asset($website->html )}}"/>
</a> #endforeach
</div>
</body>
<link href="{{asset('css/bootstrap-colorpicker.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('css/bootstrap-formhelpers.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset ('//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css')}}" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{!! asset('js/bootstrap-colorpicker.min.js') !!}">
</script>
<script type="text/javascript" src="{!! asset('js/bootstrap-formhelpers.js') !!}">
</script>
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
<script type="text/javascript" src="{!! asset('js/bootstrap-filestyle.min.js') !!}">
</script>
</html>
#endsection #show
Can anyone help me get started?
You're wanting to Displaying Unescaped Data:
By default, Blade {{ }} statements are automatically sent through
PHP's htmlentities function to prevent XSS attacks. If you do not want
your data to be escaped, you may use the following syntax:
{!! $website->html !!}
I've found this similar error mentioned since Foundation 3, usually because foundation.min.js was not included. I have this included but links in the dropdown menu are not working.
<!doctype html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" href="../css/normalize.css" />
<link rel="stylesheet" href="../css/foundation.min.css" />
<link rel="stylesheet" href="includes/style.css" />
<script src="../js/vendor/jquery.js"></script>
<script src="../js/foundation.min.js"></script>
<script src="../js/vendor/modernizr.js"></script>
<script>
$(document).foundation();
</script>
</head>
<body>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>dashboard</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li>chapters</li>
<li>sections</li>
<li>paragraphs</li>
<li>references</li>
<li>annotations</li>
<li>help</li>
<li class="has-dropdown">
Create
<ul class="dropdown">
<li>new chapter</li>
<li>new section</li>
<li>new paragraph</li>
<li>new annotation</li>
</ul>
</li>
</ul>
</section>
</nav>
</body>
</html>
Am I missing a setting? I've seen preventDefault() mentioned as a possible culprit, but why on earth would the default click behavior be prevented...for clickable menu links?
The $(document).foundation(); line must be invoked before the closing BODY tag, not HEAD tag. I was loading foundation before the DOM elements had loaded.
This explains the whacky behavior.