i tested some javascript code without any variables and loops and it worked fine. it only used `
<link rel="stylesheet" type="text/css" href="css/lightbox.min.css">`
<script src="lightbox-plus-jquery.min.js" type="text/javascript"></script>
which i got from cdn and the html only had this
html for pop image
<div class="gallery">
</div>
what i need is to apply it on this code
html in laravel
#foreach($posts as $post)
...................
<div class="gallery">
<div>
.....................
#endforeach
You will want to place the CDN links at the bottom of your body element. This ensures that they wont hold up the rendering of other elements on your page.
...
<link rel="stylesheet" type="text/css" href="css/lightbox.min.css">`
<script src="lightbox-plus-jquery.min.js" type="text/javascript"></script>
</body>
Additionally, you'll want to move the <div class="gallery"> OUTSIDE of the loop otherwise you'll wrap each image up in the gallery wrapper.
Here's how you should do it:
Note I also changed the image id attribute to a class as ids need to be unique.
<div class="gallery">
#foreach($posts as $post)
<a href="/storage/{{$post->image}}" data-lightbox='lo'>
<img src="/storage/{{$post->image}}" class="img-posts" alt="">
</a>
#endforeach
</div>
Related
I am having the weirdest problem and cannot figure it out. I am working with a series of collapsable buttons in bootstrap and everything seems to work fine if I call boostrap before jquery:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
However, if I call jquery before boostrap (as should be done) then the collapsibles won't close after being opened. I am not sure if I am calling libraries that are incompatible between each other or there might be another issue I am not aware of? The complete <head> tag is:
<link href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<link href="https://cdn.bootcss.com/dragula/3.7.1/dragula.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.js"></script>
And a sample of the collapsibles:
<div class="container" id="maincontainer">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1"><center><b>My Panel</b></center></a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
### contents
</ul
</div>
</div>
</div>
</div>
I'm guessing you are using a template for your website.
So your collapsible is probably using Bootstrap in combination with jQuery's $(document).ready and thus bootstrap needs to be loaded before the jQuery code otherwise you are missing parts of the DOM.
The thing about calling jQuery before bootstrap is is that your jQuery code contains a lot of $(document).ready(function() { code }) ; blocks, which means that the DOM(the entire structure of your page) needs to be loaded in order for the code to execute.
So if you call jQuery before bootstrap it will go through all of your jQuery code and give out false on a lot of code blocks because a big part of your DOM(the bootstrap integrated parts) gets loaded after the jQuery code is already executed.
So my guess(since i can't see your entire code) would be that your code is fine and that it's just a matter of calling scripts in the right order.
i have to include a css file for only one div and to include another css file for second div. How can we do this?
i have tried Switch cases for this, but when it loads css for one case it is still showing the css effect in other case also.
here is what i have tried so far:
<?php
switch ($type_show1):
case 'welcome1':
//default:
?>
<link href="css/main.css" rel="stylesheet" type="text/css" /> // css to include
<div class="page-header">
<div class="page-title">
<h5>Booking Management</h5>
<span>Good morning, Admin!</span>
</div>
</div>
<!-- /page header -->
<?php
break;
endswitch;
?>
<?php
switch ($type_show2):
case 'welcome2':
//default:
?>
<!--<link href="css/main.css" rel="stylesheet" type="text/css" />--> // css not to include
<div class="page-header">
<div class="page-title">
<h5>Booking Management</h5>
<span>Good morning, Admin!</span>
</div>
</div>
<?php
break;
endswitch;
?>
Any Help :)
Whenever you add a css file to the page, it applies to the whole document. However looking at your code, what I think you're trying to do is display 1 chunk of html under one condition and another chunk under a separate condition. To do this change your code to this:
<?php
switch ($type_show1):
case 'welcome1':
//default:
?>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<?php
break;
case 'welcome2' :
?>
<link href="css/main2.css" rel="stylesheet" type="text/css"/>
<?php
break;
?>
<div class="page-header">
<div class="page-title">
<h5>Booking Management</h5>
<span>Good morning, Admin!</span>
</div>
</div>
<!-- /page header -->
Speaking to what you actually said about using one stylesheet per element. It is possible using Web Components, http://webcomponents.org/, and shadow DOM, http://webcomponents.org/articles/introduction-to-shadow-dom/, but I think in your situation it would be best to simply give each div an id or a class and apply the css specifically to that id or class from one css stylesheet.
UPDATE
To apply CSS to two different divs do this:
HTML
<html>
<head>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page-header" id="div1">
<div class="page-title">
<h5>Booking Management</h5>
<span>Good morning, Admin!</span>
</div>
</div>
<div class="page-header" id="div2">
<div class="page-title">
<h5>Booking Management</h5>
<span>Good morning, Admin!</span>
</div>
</div>
</body>
</html>
CSS (main.css)
#div1 {
//Some CSS Styles to apply to the first div
}
#div2 {
//Some CSS Styles to apply to the second div
}
Nope, you can't use a StyleSheet for just one div
create a new div and use your special CSS for that div.
I have a issue with this plug in of jquery cycle2.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Usare jQuery Cycle2 (2) | Sintesi-design.it</title>
<link rel="stylesheet" type="text/css" href="css/fonts/font.css">
<link rel="stylesheet" type="text/css" href="css/template.css">
</head>
<body>
<div class="slideshow"
data-cycle-fx=carousel
data-cycle-timeout=0
data-cycle-carousel-visible=5
data-cycle-next="#next"
data-cycle-prev="#prev"
data-cycle-pager="#pager"
>
<img src="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class=center>
<a href=# id=prev><< Prev </a>
<a href=# id=next> Next >> </a>
</div>
<div class="cycle-pager" id=pager></div>
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.cycle2.js"></script>
<script src="jquery.cycle2.carousel.js"></script>
</body>
</html>
I downloded the code of the plug in like say the documentation.
The others effects works, only this with transition not, someone know why?
Thanks
<div class="cycle-slideshow"
http://jsfiddle.net/ska2hjr0/
According to documentation:
cycle-slideshow is a special classname which tells Cycle2 to
auto-initialize the slideshow when the page is loaded.
http://jquery.malsup.com/cycle2/demo/basic.php
Another method, add jquery code to page: $( '.slideshow' ).cycle();
But auto initialization is even better.
I'm using JQuery Mobile, and now I would like to navigate through pages with the minimum of loading amount of scripts everytime a page is being loaded, I mean that I would like to import only ONCE all the general scripts of all the pages (JQuery.js, jquery_mobile.js, main.js etc...) and
So I have an index.html with the following code :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<title>Hybrid App</title>
<link rel="stylesheet" href="jqueryMobile/jquery.mobile-1.4.4.css" />
<link rel="stylesheet" href="jqueryMobile/jquery.mobile.icons-1.4.4.css" />
<link rel="stylesheet" href="css/jquery.mmenu.css" />
<link rel="stylesheet" href="css/main.css" />
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="jqueryMobile/jquery.mobile-1.4.4.js"></script>
<script type="text/javascript" src="js/jquery.mmenu.min.js"></script>
<script type="text/javascript" src="js/initOptions.js"></script>
<script type="text/javascript" src="sharedResources/customersObject.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/messages.js"></script>
</head>
<body style="display: none;">
<div data-role="page" id="page">
<link rel="stylesheet" href="css/pages/splash-view.css" />
<div data-role="header" id="header" data-position="fixed"></div>
<div data-role="content" id="pageContent">
<div id="splash-wrapper">
<div class="splash-content">
Login
</div>
</div>
</div>
<div data-role="footer" id="footer" data-position="fixed"></div>
<nav id="menu">
<ul data-role="listview" data-inset="true">
<!-- list of items in the slide sidebar menu (called drawer menu in Andorid -->
</ul>
</nav>
<script src="js/pages/splash-view.js"></script>
</div>
</body>
so when clicking on the link I go to an external HTML file located in : pages/faqs-view.html with the following code :
<div data-role="page" id="page" data-url="pages/faqs-view.html">
<link rel="stylesheet" href="css/pages/faqs-view.css">
<div data-role="header" id="header" data-position="fixed"></div>
<div data-role="content" id="pageContent">
<div id="faqs-wrapper">
<div class="faqs-content">
<div data-role="collapsible-set" data-corners="false" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" id="faq-set">
</div>
</div>
</div>
</div>
<div data-role="footer" id="footer" data-position="fixed"></div>
<nav id="menu">
<p class="employee-name">Welcome, Ali</p>
<ul data-role="listview" data-inset="true">
<!-- list of items in the slide sidebar menu (called drawer menu in Andorid -->
</ul>
</nav>
<script src="js/pages/faqs-view.js"></script>
The problem is that when loading the faqs-view.html page, I can see that none of the scripts included in the <head> are being executed, I have tried to put them after the <body> tag, but it's the same, BUT the CSS files are being interpreted.
How can I achieve that ? Thank you.
Worklight-based applications are Single Page Applications. This means you should never navigate away from the index.html. Doing so will cause the app to lose its context to the Worklight framework, thus it will begin to fail.
If you'd like to add multi-page navigation to the application, you can do so using the API provided by 3rd-party frameworks. Here you are using jQuery Mobile.
You've changed the loading order of scripts. You shouldn't.
Use the Worklight Studio wizard in order to create an app template with jQuery Mobile (new project > new hybrid application (click on "configure javascript libraries" > select the library you would like to add))
Keep initOptions.js, main.js and messages.js where they are by default, at the bottom
The index.html you get is your template with jQuery Mobile
If you want to replace the bundled jQuery, you need to comment out (slide #6) the following script tag: <script>window.$ = window.jQuery = WLJQ;</script>. Worklight is bundled with jQuery 1.9.x.
For a bare-bones example of multi-page navigation in a Worklight-based application, using jQuery Mobile, take a look at this project.
As you navigate between pages, you only replace the contents of the data-role="page". The scripts have already been loaded. You can load additional scripts per where required when loading a specific page.
They are executed in the order you put them on the page.
window.$ = window.jQuery = WLJQ;
Cannot be executed before jQuery is included.
Edit:
When you load a new page without the header it's clear that it won't be excecuted because it is not there.
When you replace html in your page you should look at the "on" function for events.
I created a Simply Modal popup dialog which works fine if you click on
<a href='#' class='confirm'>Demo</a>
however how can I call this "confirm" css class from within Javascript. I have tried...
<script language="JavaScript" type="text/JavaScript">
$(".confirm").click();
** Also tried this to but no good... **
document.getElementsByTagName('body')[0].className = 'confirm';
</script>
But didn't work. I'm sure this is pretty easy to do but can't seem to get it.
Thanks,
Frank G.
*** HERE IS THE SCRIPT I AM USING ***********
SimpleModal Confirm Modal Dialog
<!-- Page styles -->
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<!-- Confirm CSS files -->
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<!-- JS files are loaded at the bottom of the page -->
</head>
<body>
<div id='container'>
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='confirm-dialog'>
<h3>Confirm Override</h3>
<p>A modal dialog override of the JavaScript confirm function. Demonstrates the use of the <code>onShow</code> callback as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.</p>
<input type='button' name='confirm' class='confirm' value='Demo'/> or <a href='#' class='confirm'>Demo</a>
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Confirm 123</span></div>
<div class='message'></div>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/confirm/header.gif' alt='' />
<img src='img/confirm/button.gif' alt='' />
</div>
</div>
</div>
<!-- Load JavaScript files -->
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/confirm.js'></script>
<script type="text/javascript">
$('.confirm').dialog({modal:true});
$('.confirm').modal();
$(".confirm").click();
$(document).ready(function(){
$('.confirm').dialog({modal:true});
$('.confirm').modal();
$(".confirm").click();
});
</script>
</body>
</html>
maybe you can try this jquery solution:
$("style[type=text/css]").text('#import url("*.css");');
To call it on page load simply call it inside document ready
$(document).ready(function(){
$('#modal_div_id').modal(); // Id would be better (#confirm)
});
This will call it at the page load. Make sure you have only one class at the page named as confirm.
Documentation.
A fiddle here.