How can I display each content in twitter bootstrap pagination? I can only display the first content. I used tag to display the contents but I don't know how to get all the element ids.
Here is the javascript code that get the element id to display it in pagination:
<div class="container">
<div class="row-fluid">
<div class="bs-docs-example">
<p class="well demo content1">
Dynamic content here.
</p>
<p class="demo demo1"></p>
</div>
<!-- Demo time! -->
<script type="text/javascript">
var pageNumber = 0;
$('.demo1').bootpag({
total: '${count}',
page: 1
}).on("page", function(event, num){
$(".content1").html(document.getElementById("child")); // or some ajax content loading...
$(this).bootpag({total: '${count}', maxVisible: '${count}'});
});
</script>
</div>
</div>
Here is the code the generates the dynamic data in gsp page:
<g:each var="item" in="${faxDocument}">
<div id="child">
<center><img src="data:image/png;base64, ${item} " width="850" height="1200" /></center>
</div>
</g:each>
i think with twitter bootstrap you dont need no js at all, try to generate the pagination "by hand" sth. like:
<ul class="pagination">
<g:each in="${1..count}" status="i" >
<g:if test="${i == offset}>
<li class="active">${i}</li>
</g:if>
<g:else>
<li>${i}</li>
</g:else>
</g:each>
</ul>
Simple solution would be to add the missing classes and tags via jQuery e.g.
// Fix pagination
// Wrap all direct children into a list element
$('ul.pagination >').wrap('<li class="page-item"></li>');
// add the missing class to the href tags
$('ul.pagination li a').addClass('page-link');
// Handle active element
$('span.currentStep').parent().addClass('active');
Related
I'm trying to target dynamic added elements to work with lightgallery.js. See the exemple bellow:
<div id="animated-thumbs" class="page-divs-middle">
<!-- STATIC EXAMPLE -->
<div class="col-md-3 col-xs-3 text-nowrap spacer-page-models fit pulsar">
<a href="assets/img/01.jpg" data-lightbox="image-1">
<img class="img-responsive img-responsive-center cover" src="assets/img/01.jpg">
</a>
</div>
<div class="col-md-3 col-xs-3 text-nowrap spacer-page-models fit pulsar">
<a href="assets/img/01.jpg" data-lightbox="image-1">
<img class="img-responsive img-responsive-center cover" src="assets/img/01.jpg">
</a>
</div>
<!-- STATIC EXAMPLE -->
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#animated-thumbs').lightGallery({
thumbnail:true,
selector: 'a',
download:false,
share:false,
autoplayControls: false,
});
})
</script>
The code above is a static example that's demonstrate how to use lightgallery script, this works as expected. But I'm trying to make the script works adding elements dynamically, like this:
<div id="animated-thumbs" class="page-divs-middle">
<!-- Elements here were dynamically added -->
<!-- Elements here were dynamically added -->
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#animated-thumbs').lightGallery({
thumbnail:true,
selector: 'a',
download:false,
share:false,
autoplayControls: false,
});
})
</script>
JavaScript
var target = $('#animated-thumbs');
target.append('<div class="col-md-3 col-xs-3 text-nowrap spacer-page-models fit pulsar"><img class="img-responsive img-responsive-center cover" src="assets/img/01.jpg"></div>');
But it's not working because document was loaded previously. Someone can help me?
You need to append html to id="animated-thumbs" before initialising gallery, or reinitialize gallery after appending html.
Something like:
$('#animated-thumbs').lightGallery().destroy(true);
$('#animated-thumbs').append('<div><h3>some html to add</h3></div>');
$('#animated-thumbs').lightGallery({ //params });
Please note that this is just description code and it will not work if you just copy it. Check gallery documentation on how to call destroy method (usually they all have it) and apply it to your code. Or if there is 'reinit' method you can skip destroy and just reinit gallery after html appending.
I am trying to pull certain item IDs based on if they have an image tag or not. For a given input like the one below:
<div id="ID_1">
<p><img src="image4.png"></p>
</div>
<div id="ID_2">
</div>
<div id="ID_3">
<p><img src="image6.png"></p>
</div>
<div id="ID_4">
<p><img src="image4.png"></p>
</div>
I could get something like:
ID_1: image4.png
ID_2:
ID_3: image6.png
ID_4: image4.png
I am not too familiar with HTML or Javascript, so any help or resources that someone may have or know will be greatly appreciated.
I would recommend using jQuery for something like this
(dont forget to include jquery in the html head)
Html =>
<div id="divContainer" >
<div id="ID_1">
<p><img src="image4.png"></p>
</div>
<div id="ID_2">
</div>
<div id="ID_3">
<p><img src="image6.png"></p>
</div>
<div id="ID_4">
<p><img src="image4.png"></p>
</div>
</div>
Javascript =>
const doesContainImg = [];
$(".divContainer div").each(function() {
// check for an img
if ($(this).find("img").length) {
// store id in array that contains ids that have imgs
doesContainImg.push($(this).attr("id"));
}
});
that should work, if it does not let me know!
Add a class on those div.
Let's say you have the class "image-div".
We can use this class to see if the divs contain an image or not.
JQUERY:
$(".image-div").each(function(){
if($(this).find('img').length){
//if this div contains an image do something.
}
});
You can attach this code to an event and use it
Javascript expert this is my template coding:
<html>
<head>
</head>
<body>
<div id='top'>
<h2> This is my website headline </h2>
</div>
<div class='outer-wrapper'>
<h3>This is content area for main blog </h3>
</div>
<div class='footer'>
<h4> This is footer content area </h4>
</div>
<!--Copyright Structure Start-->
<div id='copyright'>
<div id='container'>
<p>Copyright 2016. Designed By <a href='#'>Company</a>
</p>
</div>
</div>
<!--Copyright Structure End-->
</body>
</html>
i have the below html structure that is used in the template.
<div id='copyright'>
<div id='container'>
<p> Designed By <a id='doom' href='http://www.example.com'>Company</a>
</p>
</div>
</div>
Case 1: Now,i want if the same sequence exist #copyright > #container > p > a#doom in the the html structure inside the template Then its ok, if any if these has removed, then redirect my page to example.com.
<div id='copyright'>
<div id='container'>
</div>
</div>
See the structure above has no <p></P> tag, now it should be redirected.
Case 2: If there is added extra other html tag inside my html structure in the template rather than these tags: #copyright #container P and a#doom. then it should also redirected.
<div id='copyright'>
<div id='container'>
<div id='wrap'>
<p> Designed By <a id='doom' href='http://www.example.com'>Company</a>
</p>
</div>
</div>
</div>
See the structure has extra div wrap now, it should redirected to example.com because it does not match the sequence.
I hope someone will give the script soon. thanks.
You can just use the selector in JQuery and check the length. If you change the HTML, the selector won't match, and you don't redirect:
Run this when you HTML has loaded (onLoad or domReady):
if( $('#copyright > #container > p > a#doom').length == 0 ) {
alert("Redirect");
}
Example fiddle:
https://jsfiddle.net/feb5zex2/
You basically want to run this code when the document is ready (1. line) and if a specific CSS selector with direct ancestor combinations doesn't match (2. line), redirect using window.location.replace() (3. line).
$(document).ready(function() {
if ($("#copyright > #container > p > a#doom").length == 0) {
window.location.replace("http://www.example.com");
}
})
I made a snippet and I am working a jQuery show/hide when the data attr matches.
HTML structure is like below
<div class="container">
<div class="item" data-item="1">1
<div class="inside" data-content="1">
</div>
</div>
<div class="item" data-item="2">2
<div class="inside" data-content="2">
</div>
</div>
<div class="item" data-item="2">3
<div class="inside" data-content="3">
</div>
</div>
</div>
the class class="item" will be append (ed) to outside div, I'd like to achieve that,
if content data-num is existing, do not "append()", show()instead, then the slides can be showed properly. I wanted to learn how to check if data-num existing?
so the concept is like that,
if click on class item if item 's data-item(e.g. data-item = "2") matches outside > content data-num (e.g data-num = "2" ), then show() that content class.
Hope I made it clear. Thanks a lot.
Here is online sample: http://jsfiddle.net/8VD9R/
You have to iterate over the content class.
I am writing the sample code here ,Please update it accordingly:
$('.item').click(function(){
$('.content').hide();
$('.content').each(function(i, obj) {
if($(this).attr('data-item')==$(obj).attr('data-num'))
{
$(obj).show();
return;
}
});
});
Question: What codes should I paste on my blog HEAD?
Using any method (jQuery, javaScript, CSS, HTML, exclude php), how to add new HTML structure to <img/> on post entry, if there is more than one <img/> ?
Blog platfrom: Blogger.com
Example of entry content
If there is only one <img/> the post entry. No additions or changes in the structure of HTML.
But if there is more than one <img/> (example below),
<div class="summary post-body entry-content">
<img src="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg"/>
<img src="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg"/>
<img src="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg"/>
<img src="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg"/>
<!-- end summary post-body entry-content --></div>
How to transform it as HTML below (automaticly),
<div class="summary post-body entry-content">
<!-- start te-container --><div class="te-container">
<div class="te-controls">
<select id="type">
<option value="te-flip1">Flip 1</option>
<option value="te-flip2">Flip 2</option>
<option value="te-flip3">Flip 3</option>
<option value="te-flip4">Flip 4</option>
</select>
<a id="te-next" href="#" class="te-next">next</a>
<div class="te-shadow"></div>
</div>
<!-- start-wrapper --><div id="te-wrapper" class="te-wrapper">
<div class="te-images">
<img src="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg"/>
<img src="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg"/>
<img src="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg"/>
<img src="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg"/>
</div>
<div class="te-cover">
<!-- HOW TO DO AUTOMATICLY, FISRT <img/> located at here --><img src="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg"/>
</div>
<div class="te-transition">
<div class="te-card">
<div class="te-front"></div>
<div class="te-back"></div>
</div>
</div>
<!-- end te-wrapper --></div>
<!-- end te-container --></div>
<!-- end summary post-body entry-content --></div>
So here's a way to solve your problem,
First to be clear as you wanted to add certain markup directly inside your code, I put those inside a variable. Kept the child node in another variable, appended that with existing markup and updated certain elements as asked for.And I would surely ask for a better solution if available.
Here's the script for your scenario,
$(document).ready(function(){
//checks if no. of image is > 1
if($(".summary").children().length > 1){
// gets all elements inside that div
var images = $(".summary").children();
//makes that div empty
$(".summary").empty();
//kept whole markup inside a variable
var newLayout = "<div class='te-container'> <div class='te-controls'><select id='type'><option value='te-flip1'>Flip 1</option><option value='te-flip2'>Flip 2</option><option value='te-flip3'>Flip 3</option><option value='te-flip4'>Flip 4</option></select><a id='te-next' href='#' class='te-next'>next</a><div class='te-shadow'></div></div><div id='te-wrapper' class='te-wrapper'><div class='te-images'></div><div class='te-cover'></div><div class='te-transition'><div class='te-card'><div class='te-front'></div><div class='te-back'></div></div></div></div></div>";
//appends the layout inside .summary div
$(".summary").append(newLayout);
//adds the images inside new div
$(images).clone().appendTo(".te-images");
//gets first child image of .te-images
var firstImagePath = $(".te-images img:first-child").attr("src");
//adds first child image of .te-images inside .te-cover div
$(".te-cover").append("<img src="+ firstImagePath + " />");
}
});
Live Demo
I'm not sure about "automaticly" you meant.
But if u want that div "automaticly" appear img, you can use js. Named the div which contain img. Then wirte this in js :
$(document).ready( function () {
document.getElementsByName('div_name_here').innerHTML = <img src='...'/>
}
Hope that help. Sorry my English is not good.