Active Class in Owl carousel - javascript

I generate item in owl carousel from JavaScript code but the item div in the carousel does not have active class here is my code:
for (var i = 0; i < data.length; i++) {
$(".owl-carousel").trigger('add.owl.carousel', [
'<div class= "item">' +
'<div class="flyout-content">' +
'<h5>' + data[i].firstName + '</h5>' +
'<h3>' + data[i].lastName + '</h3>' +
'</div>' +
'</div>'
]
}

as #Pedram said i did that and i add if statment to check first index and its work here is the code in case someone need it
for (var i = 0; i < data.length; i++) {
if(i == 0){
$(".owl-carousel").trigger('add.owl.carousel', [
'<div class= "item">' +
'<div class="flyout-content">' +
'<h5>' + data[i].firstName + '</h5>' +
'<h3>' + data[i].lastName + '</h3>' +
'</div>' +
'</div>'
]);
var owl = $('.owl-carousel');
owl.owlCarousel();
owl.trigger('refresh.owl.carousel');
}
}

Related

why gihub pages wont load conditionals of JS script

My code is working properly on liveserver, but when I merge on github and open using github pages both conditionals "if" dont work at all. It's something that should be apllied on all pages.
This is how I load on HTML
<head>
<script src="./JS/header.js" defer></script>
</head>
<body>
<header id="header"></header>
This is the JS code:
function insertHeader(){
var codeBlock1 = '<div class="container">' +
'<img class="logo" src="./assets/logo.jpeg" alt="logo página">' +
'<div class="menu-section">' +
'<div class="container-menu">' +
'<input type="checkbox" id="checkbox-menu" />' +
'<label class="menu-button-container" for="checkbox-menu">' +
'<span></span>' +
'<span></span>' +
'<span></span>' +
'</label>' +
'<nav>' +
'<ul class="menu">' +
'</ul>' +
'</nav>' +
'</div>' +
'</div>' +
'</div>';
document.querySelector("#header").innerHTML += codeBlock1;
const urlAtual = window.location.pathname.substring(1);
if (urlAtual !== 'index.html'){
var codeBlockHome = '<li>' +
'Home' +
'</li>';
document.querySelector(".menu").innerHTML += codeBlockHome;
};
var codeBlockLocais =
'<li>' +
'Locais' +
'<ul class="submenu-locais">' +
'<li>Pontos Turísticos</li>' +
'</ul>' +
'</li>';
document.querySelector(".menu").innerHTML += codeBlockLocais;
if (urlAtual !== 'team.html'){
var codeBlockTeam = '<li>' +
'Equipe' +
'</li>';
document.querySelector(".menu").innerHTML += codeBlockTeam;
};
var codeBlockContato = '<li>' +
'Contato' +
'</li>';
document.querySelector(".menu").innerHTML += codeBlockContato;
for (i=0; i< estados.length; i++){
estadosNome[i] = estados[i].slice(0, -5);
estadosSigla[i] = estados[i].split(' ').pop();
var codeBlock2 = `<li>${estadosNome[i]}</li>`;
document.querySelector(".submenu-locais").innerHTML += codeBlock2;
}};
insertHeader();
Only "ifs" dont work, and I already solved this problem with CSS. But I'm still curious to why it worked on liveserver and not on github pages.

Another thing keep checkbox checked after refresh/reload page

Here are many solutions of checkbox keep checked but in this method these solution does not work.
I've trying in AdminLTE to keep layout-options work after reload the page, but the whole coding of layout-option comes from jquery and I'm not comforted in jquery, can you tell me how can fix. I have used these codes...
demo.js
send views of layout options..
// Layout options
$demoSettings.append(
'<h4 class="control-sidebar-heading">'
+ 'Layout Options'
+ '</h4>'
// Fixed layout
+ '<div class="form-group">'
+ '<label class="control-sidebar-subheading">'
+ '<input type="checkbox" data-layout="fixed"class="pull-right" name="fixed_layout"/> '
+ 'Fixed layout'
+ '</label>'
+ '<p>Activate the fixed layout. You can\'t use fixed and boxed layouts together</p>'
+ '</div>'
// Boxed layout
+ '<div class="form-group">'
+ '<label class="control-sidebar-subheading">'
+ '<input type="checkbox"data-layout="layout-boxed" class="pull-right" name="boxed_layout"/> '
+ 'Boxed Layout'
+ '</label>'
+ '<p>Activate the boxed layout</p>'
+ '</div>'
// Sidebar Toggle
+ '<div class="form-group">'
+ '<label class="control-sidebar-subheading">'
+ '<input type="checkbox"data-layout="sidebar-collapse"class="pull-right" name="toggle_sidebar"/> '
+ 'Toggle Sidebar'
+ '</label>'
+ '<p>Toggle the left sidebar\'s state (open or collapse)</p>'
+ '</div>'
// Sidebar mini expand on hover toggle
+ '<div class="form-group">'
+ '<label class="control-sidebar-subheading">'
+ '<input type="checkbox"data-enable="expandOnHover"class="pull-right" name="sidebar_hover"/> '
+ 'Sidebar Expand on Hover'
+ '</label>'
+ '<p>Let the sidebar mini expand on hover</p>'
+ '</div>'
// Control Sidebar Toggle
+ '<div class="form-group">'
+ '<label class="control-sidebar-subheading">'
+ '<input type="checkbox"data-controlsidebar="control-sidebar-open"class="pull-right" name="toggle_slide"/> '
+ 'Toggle Right Sidebar Slide'
+ '</label>'
+ '<p>Toggle between slide over content and push content effects</p>'
+ '</div>'
// Control Sidebar Skin Toggle
+ '<div class="form-group">'
+ '<label class="control-sidebar-subheading">'
+ '<input type="checkbox"data-sidebarskin="toggle"class="pull-right" name="toggle_skin"/> '
+ 'Toggle Right Sidebar Skin'
+ '</label>'
+ '<p>Toggle between dark and light skins for the right sidebar</p>'
+ '</div>'
)
var $skinsList = $('<ul />', {'class': 'list-unstyled clearfix'})
I've Using jquery for checkbox keep checked, It works on other single HTML pages, but here i do not understand how to do this...
(function() {
var cbstate;
window.addEventListener('load', function() {
cbstate = JSON.parse(localStorage['CBState'] || '{}');
for(var i in cbstate) {
var el = document.querySelector('input[name="' + i + '"]');
if (el) el.checked = true;
}
var cb = document.getElementsByClassName('pull-right');
for(var i = 0; i < cb.length; i++) {
cb[i].addEventListener('click', function(evt) {
if (this.checked) {
cbstate[this.name] = true;
}
else if (cbstate[this.name]) {
delete cbstate[this.name];
}
localStorage.CBState = JSON.stringify(cbstate);
});
}
});
})();
})

Load iframe Inside Modal on Button Click

I'm building a retail website using Bootstrap. For the products there is a thumbnail with a "More Info" button that loads a modal. Inside of the modals is an iframe with more information for the bike. When I load the page it loads every iframe (about 60). I'm trying to figure out how to load the iframe (var bike_modal_descriptions_giant) when the appropriate button is clicked.
I have the site up for testing here: Site
I'm using a javascript loop to populate the thumbnails.
Screenshot of thumbnails.
Script that reads from other file to populate thumbnails, just changed for each brand:
<script>
for (i = 0; i < num_items_giant; i++) {
if (i % 3 == 0) {
document.getElementById('catalogue').innerHTML += '<div class="row">';
}
document.getElementById('catalogue').innerHTML += '<div class="col-sm-6 col-md-4">'
+ '<div class="thumbnail">'
+ '<img src=' + bike_pics_giant[i] + '>'
+ '<div class="caption">'
+ '<h3>' + bike_titles_giant[i] + '</h3>'
+ '<p>' + bike_descriptions_giant[i] + '</p>'
+ '<p><button onclick="" type="button" class="btn btn-default" id="btn-giant' + i + '">More Info</button></p>'
+ '<div class="modal fade" id="modal-giant' + i + '" role="dialog">'
+ '<div class="modal-dialog">'
//<!-- Modal content-->
+ '<div class="modal-content">'
+ '<div class="modal-header">'
+ '<button type="button" class="close" data-dismiss="modal">×</button>'
+ '<h4 class="modal-title">' + bike_titles_giant[i] + '</h4>'
+ '</div>'
+ '<div class="modal-body">'
+ '<p>' + bike_modal_descriptions_giant[i] + '</p>'
+ '</div>'
+ '<div class="modal-footer">'
+ '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>';
if (i % 3 == 0) {
document.getElementById('catalogue').innerHTML += '</div>';
}
}
</script>
Modal Script:
<script>
/* Giant */
for (i = 0; i < num_items_giant; i++) {
setupButton("btn-giant" + i, "modal-giant" + i);
}
/* Liv */
for (i = 0; i < num_items_liv; i++) {
setupButton("btn-liv" + i, "modal-liv" + i);
}
function setupButton(button, modal){
$(document).ready(function(){
$("#" + button).click(function(){
$("#" + modal).modal();
});
});
}
</script>
Truncated version of modal content file. Each section is an array and each row creates a new thumbnail:
var num_items_giant = 38;
var bike_pics_giant = ["pictures/bikes/2016/road/Propel/Propel-Adv-SL-0/Propel-Advanced-SL-0-Comp.jpg",
"pictures/bikes/2016/road/Propel/Propel-Adv-SL-Team/Propel-Adv-SL-Team.jpg"];
var bike_titles_giant = ["Giant Propel Advanced SL 0",
"Giant Propel Advanced SL Team"];
var bike_descriptions_giant = ["This pro peleton standout is the pinnacle of aero road. A killer in the sprints, with sublime overall ride quality.<br><strong>$9000</strong>",
"This pro peleton standout is the pinnacle of aero road. A killer in the sprints, with sublime overall ride quality.<br><strong>$6900</strong>";
var bike_modal_descriptions_giant = ["<iframe style=\"border:none\" width=\"710\" height=\"700\" src=\"https://www.giantretailacademy.com/go/?c=US&axid=600043\"></iframe>",
"<iframe style=\"border:none\" width=\"710\" height=\"700\" src=\"https://www.giantretailacademy.com/go/?c=US&axid=615001\"></iframe>";

How to display a div with items from array in javascript

I have a param called "exraData" which can be a string or array (depends on some conditions).
I have to display some content using java script.
in case "exraData" is a String the content is displayed well by the following code:
this.resulto = '<div class="avatarHeight">' +
'<div class="avatar">' + spanPic + '</div>' +
'<div class="info ' + company + '">' + item.show +
'<div class="tt-hint">' + exraData + '</div>' +
'</div>' +
'</div>';
In case it is array I use the following code but nothing is displayed:
this.resulto = '<div class="avatarHeight">' +
'<div class="avatar">' + spanPic + '</div>' +
'<div class="info ' + company + '">' + item.show
for(var i=0;i<exraData.length;i++){
+'<div class="tt-hint">' + exraData[i] + '</div>'
}
+'</div>' +
'</div>';
You can't have a for loop inline. Here is the for loop outside with the desired result.
var spanPic='tempPic';
var company='xyz';
var item={};
item.show='temp';
var exraData=['one','two','three'];
this.resulto = '<div class="avatarHeight">' +
'<div class="avatar">' + spanPic + '</div>' +
'<div class="info ' + company + '">' + item.show;
for(i=0;i<exraData.length;i++){
this.resulto +='<div class="tt-hint">' + exraData[i] + '</div>';
}
this.resulto+='</div>' + '</div>';
document.write(this.resulto);

Jquery .Hover issue with Ajax

I have this code:
cuts_html = '';
for( i = 0; i < attachments.length; i++ ) {
fburl3 = site_url + '/haircut-detail/?img_id=' + attachments[i].ID + '&uid=' + attachments[i].post_author;
if( isNaN(attachments[i].view_count) ) attachments[i].view_count = 0;
cuts_html += '<div id="controller-image" class="cut-image">';
cuts_html += '<div id="cut-imageplacer">';
cuts_html += '<div class="cut-image-info">' +
'By <a href="' + user_profile_url +
'&user_id=' + attachments[i].post_author + '">' +
attachments[i].author_name + '</a>' +
'</div>';
cuts_html += '<div class="commentbox-1">' +
'<img src="https://d2xcq4qphg1ge9.cloudfront.net/assets/17276/435546/original_views.png"> ' +
attachments[i].view_count +
' <img src="https://d2xcq4qphg1ge9.cloudfront.net/assets/17276/435545/original_talk-bubble.png"> ' +
'<fb:comments-count href="' + fburl3 + '"></fb:comments-count>' +
'</div></div>';
cuts_html += '<a class="cut-image-a" ' +
'href="' + image_detail_url +
'?uid=' + attachments[i].post_author +
'&img_id=' + attachments[i].ID + '">' +
attachments[i].attachment_image_html + '</a>';
cuts_html += '</div>';
}
Div Id cut-imageplacer is display:none, so what I want is when someone hovers the controller-image div, the cut-imageplacer to show and hide of course when not on. I use this code:
<script type="text/javascript">$(document).ready(function(){ $('.cut-image').hover(
function(){ $('#cut-imageplacer').show();
}, function () { $('#cut-imageplacer').hide(); }); }); </script>
But it doesn't work... Any idea what I am doing wrong? Or point me to correct direction?
It look like you are trying to attach events to elements that are being dynamically created. You need to use Live() or On() to attach events to these elements after they are created. Look at This and This to see how to use those.
like:
<script type="text/javascript">
$(document).ready(function(){
$('.cut-image').live("hover",
function(){
$('#cut-imageplacer').show();
}, function () {
$('#cut-imageplacer').hide();
});
}); </script>

Categories