Develop Reference

jquery doesn't work correctly when I call data with Fetch in VueJS?

Owlcarousel-slider works fine when I use below code.
HTML Code:
<div class="banner">
<div class="main-banner owl-carousel" id="homeage-data">
<div class="item" v-for="slider in sliders">
<div v-bind:class="slider.class_type"> <img v-bind:src="slider.image_src" alt="Electrro">
<div class="banner-detail">
<div class="container">
<div class="row">
<div class="col-md-3 col-3" v-if="slider.align_right"></div>
<div class="col-md-9 col-8">
<div class="banner-detail-inner">
<span class="slogan">{{ slider.label }}</span>
<h1 class="banner-title" v-html="slider.banner_title"></h1>
<span class="offer">{{ slider.banner_desc }}</span>
</div>
<a class="btn btn-color big" v-bind:href="slider.button_link" v-if="slider.button_np" target="_blank">{{ slider.button_text }}</a>
<a class="btn btn-color big" v-bind:href="slider.button_link" v-else-if="!slider.button_np">{{ slider.button_text }}</a>
</div>
<div class="col-md-3 col-4" v-if="!slider.align_right"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript Code:
<script>
new Vue({
el: '#homeage-data',
data: {
sliders: [
{
"label": "Discover",
"banner_title": "Top Branded for <br>headphone",
"banner_desc": "best selling, and popular.",
"image_src": "images/banner1.jpg",
"button_text": "Shop Now!",
"button_link": "#link",
"class_type" : "banner-1",
"button_np": true,
"align_right": false
},
{
"label": "curved tv",
"banner_title": "Get latest TV models",
"banner_desc": "Get the top brands for TV",
"image_src": "images/banner2.jpg",
"button_text": "Shop Now!",
"button_link": "#link",
"class_type" : "banner-2",
"button_np": false,
"align_right": true
},
{
"label": "Premium",
"banner_title": "drone cameras",
"banner_desc": "The latest camera up to 30% off",
"image_src": "images/banner3.jpg",
"button_text": "Shop Now!",
"button_link": "#link",
"class_type" : "banner-3",
"button_np": true,
"align_right": false
}
]
},
});
</script>
Output Image: (Very Nice!)
But when I call the code remotely with Fetch, the image is broken.
JavaScript Code: (I uploaded the slider array to the api.php file and called it remotely.)
<script>
new Vue({
el: '#homeage-data',
data: {
sliders: [
]
},
created() {
fetch("/api/api.php")
.then((response) => { return response.json() })
.then((response) => {
this.sliders = response.sliders;
});
}
});
</script>
Output Image:
As I understand it, it cannot render JQuery code because it was added later.
No matter what I did, I couldn't find the right way.
I have not tried the code below. It didn't happen :(
<script>
new Vue({
el: '#homeage-data',
data: {
sliders: [
]
},
created() {
fetch("/api/api.php")
.then((response) => { return response.json() })
.then((response) => {
this.sliders = response.sliders;
});
$(".main-banner, #client").owlCarousel({
//navigation : true, Show next and prev buttons
items: 1,
nav: true,
slideSpeed : 300,
paginationSpeed : 400,
loop:true,
autoPlay: false,
dots: true,
singleItem:true,
nav:true
});
}
});
</script>

Demo of using VueOwlCarousel in Vue2, without npm:
Vue.use(VueOwlCarousel);
new Vue({
el: '#app',
data: () => ({
slides: 0,
options: {
autoplay: true,
autoplaySpeed: 800,
autoplayTimeout: 1800,
lazyLoad: true,
autoplayHoverPause: true
}
}),
mounted() {
setTimeout(() => {
this.slides = 7
}, 2000)
},
})
div.owl-carousel {
width: 400px;
height: 180px;
}
.owl-stage-outer {
height: 111px;
}
.loader {
height: 180px;
display: flex;
align-items: center;
width: 400px;
justify-content: center;
}
h2 {
color: #ddd;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
<script src="https://v2.vuejs.org/js/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-owl-carousel#2.0.3/dist/vue-owl-carousel.min.js"></script>
<div id="app">
<vue-owl-carousel :items="1"
v-if="slides"
v-bind="options">
<img v-for="s in slides"
:key="s"
:src="`https://placeimg.com/400/111/any?${s}`">
</vue-owl-carousel>
<div v-else class="loader">
<h2>Loading...</h2>
</div>
</div>
Personal advice: do not mix jQuery with Vue. You only want one source of truth for your DOM manipulations.
That's the underlying cause of your issue.
Note: Owl carousel can't be initialised with empty slides. For this reason, I've placed a v-if="slides" (or, if slides would have been an array, v-if="slides.length").
Also note Owl takes control over the carousel DOM element and, from that moment on, even if you change the slides array, it won't react to the change. If you wanted to update the slides, you'd need the owl instance, change its internal slides (which are built from the original DOM) and then call its internal .refresh() method.

croppie.js blank image in returning result only on IPhone

Expected Behavior
with disabled 'enforceBoundary' and zooming out we want to have a small image and white spaces around it
Actual Behavior
after zooming out a little bit and hit crop button we have a full white image which is not what we expect
Steps to Reproduce the Problem
open codepen link below with Safari or chrome on IPhone :
click 'add' button
select an image from your gallery
Modal is open now. here is your selected picture in most very top of modal and a range slider below image
try zooming out using this range slider till you have some white spaces around the image
tap 'crop' button and you will see a fully white picture and your selected image is gone!
NOTE : Don't use android device. it's very ok on every android devices
Example Link
here is my HTML Code :
<div class="row AddItemImage">
<div class="remodal" data-remodal-id="cropImagePop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="remodal-dialog">
<div class="remodal-content">
<div class="remodal-header">
<button data-remodal-action="close" class="remodal-close close"></button>
</div>
<div class="remodal-body">
<div id="upload-demo" class="center-block">
</div>
</div>
<div class="remodal-footer">
<button id="croppie-rotate" class="croppie-rotate btn DS-edit mt-0"><i class="icon-refresh"></i> rotate</button>
<button data-remodal-action="cancel" class="btn DS-remove mt-0">close</button>
<button data-remodal-action="confirm" id="cropImageBtn" class="btn DS-submit mt-0">crop</button>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6" data-image="image1">
<div class="product product-2">
<input type="file" class="item-img file center-block" id="file1" name="file1" style="display: none;" required />
<figure class="product-media">
<div style="position: relative;">
<img id="image1" data-input="file1" class="item-img-output product-image img-fluid w-100" src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_640.png" onerror="this.onerror=null; this.src='/Contents/images/def_product.png'" />
</div>
<div class="product-action product-action-dark">
<a data-input="file1" data-hidden="hiddenimage1" class="btn-product AddImage" title="add"><span>add</span></a>
</div>
</figure>
</div>
</div>
</div>
JS Code :
var InputID = '';
var hiddenInput = '';
var $uploadCrop,
tempFilename,
rawImg,
imageId;
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.upload-demo').addClass('ready');
rawImg = e.target.result;
var inst = $('[data-remodal-id=cropImagePop]').remodal();
inst.open();
}
reader.readAsDataURL(input.files[0]);
} else {
swal("Sorry - you're browser doesn't support the FileReader API");
}
}
$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 300,
height: 300,
type: 'square'
},
boundary: {
width: '100%',
height: 400
},
enforceBoundary: false,
enableExif: true,
enableOrientation: true,
enableResize: false,
});
$('#croppie-rotate').on('click', function(ev) {
$uploadCrop.croppie('rotate', '90');
})
$(document).on('opening', '.remodal', function() {
// alert('Shown pop');
$uploadCrop.croppie('bind', {
url: rawImg,
orientation: 0
}).then(function() {
/*console.log('jQuery bind complete');*/
});
});
$('.item-img').on('change',
function() {
imageId = $(this).data('id');
tempFilename = $(this).val();
$('#cancelCropBtn').data('id', imageId);
readFile(this);
});
$('#cropImageBtn').on('click',
function(ev) {
$uploadCrop.croppie('result', {
type: 'base64',
format: 'jpeg',
quality: 0.7,
//size : 'original',
size: {
width: 1000,
height: 1000
},
backgroundColor: '#fff'
}).then(function(resp) {
$('.item-img-output[data-input=' + InputID + ']').attr('src', resp);
$('#' + hiddenInput).val(resp);
});
});
function add_image(input_id) {
$("#" + input_id).focus().trigger('click');
$("#" + input_id).unbind('click');
}
$('.AddImage').on('click',
function() {
InputID = $(this).data('input');
hiddenInput = $(this).data('hidden');
add_image(InputID);
$(this).closest('.product').find('#' + InputID).change(function() {
$(this).siblings('.product-media').find('.AddImage').click();
$(this).bind('click')
})
})
Specifications
Browser: Safari
Version: 14
I'm ready for discus about this problem and I will appreciate to anyone who can help me to fix this

How to make the jQuery modal dialog boxes show once a day?

i have jQuery modal dialog boxes, witch is opening automatically and have setTimeout:
function showChat() { $(function(){
$('#chat').dialog({
autoOpen: true,
show: 'fade',
hide: 'fade',
width: 400,
height: 250,
open: function(event, ui){
setTimeout("$('#chatnsp').dialog('close')",30000);
}
}); }); } showChatp();
<a onclick="showChatnsp(); return false;"><div style="display:none; "> </div></a> <div id="chatnsp" title=" " style="display:none; "> TEXT </div>
How to make the modal window show once a day?
Found this code, but could not connect:
<script src="http://yastatic.net/jquery/cookie/1.0/jquery.cookie.min.js"></script>
<script type="text/javascript">
$(function() {
if (!$.cookie('hideModal')) {
var delay_popup = 5000;
setTimeout("document.getElementById('overlay').style.display='block'", delay_popup);
}
$.cookie('hideModal', true, {
expires: 1,
path: '/'
});
});
</script>

jquery bootstrap accordion not expanding vertically fully

I'm using this example fiddle for nested bootstrap accordions.Fiddle here
I'm using it in MVC/Razor and I'm having trouble getting child accordions to expand fully. They only open a tiny bit and need to scroll, which is not desired.
Here's my pertinent Razor snippet: (FYI, the various style="height:150px;" attributes I added to try to get the accordions to expand but they only expanded the area around the accordions, not the accordions themselves.)
<style>
.accordion-expand-holder {
margin: 10px 0;
}
/*.accordion-expand-holder .open, .accordion-expand-holder .close {
margin: 0 10px 0 0;
}*/
.ui-accordion-content {
height: auto;
}
</style>
<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui.js"></script>
<div class="accordion-expand-holder">
<button type="button" class="open">Expand all</button>
<button type="button" class="close">Collapse all</button>
</div>
#foreach (var item in Model)
{
<div class="accordion">
<h3>#(item.Name)</h3>
<div>
<div class="text-nowrap">
<button type="button" onclick="javascript:DeleteUserStory('#(item.Id)');">Delete</button>
<button type="button" onclick="javascript:EditUserStory('#(item.Id)');">Edit</button>
</div>
<div>Description: #(item.Description)</div>
<div>Notes: #(item.Notes)</div>
<div class="accordion" style="height:150px;">
<h3>Tasks</h3>
<ul style="height:150px;">
#if (item.Tasks != null)
{
if (item.Tasks.Count > 0)
{
foreach (var task in item.Tasks)
{
<li style="height:150px;">
<button type="button" onclick="javascript:DeleteTask('#(task.Id)');">Delete</button>
<button type="button" onclick="javascript:EditTask('#(task.Id)');">Edit</button>
<br />
#(task.Name)
<br />
Description: #(task.Description)
</li>
}
}
else
{
<li>No Tasks Assigned.</li>
}
}
</ul>
</div>
<br />
<button type="button" onclick="javascript:ShowTaskModalForAdd('#(item.Id)');">Add New Task</button>
</div>
</div>
}
<script>
// Accordion - Expand All #01
$(function () {
$(".accordion").accordion({
collapsible: true,
active: false,
autoHeight: true,
});
var icons = $(".accordion").accordion("option", "icons");
$('.open').click(function () {
$('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({
'aria-selected': 'true',
'tabindex': '0'
});
$('.ui-accordion-header-icon').removeClass(icons.header).addClass(icons.headerSelected);
$('.ui-accordion-content').addClass('ui-accordion-content-active').attr({
'aria-expanded': 'true',
'aria-hidden': 'false'
}).show();
$(this).attr("disabled", "disabled");
$('.close').removeAttr("disabled");
});
$('.close').click(function () {
$('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({
'aria-selected': 'false',
'tabindex': '-1'
});
$('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header);
$('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({
'aria-expanded': 'false',
'aria-hidden': 'true'
}).hide();
$(this).attr("disabled", "disabled");
$('.open').removeAttr("disabled");
});
$('.ui-accordion-header').click(function () {
$('.open').removeAttr("disabled");
$('.close').removeAttr("disabled");
});
});
//$("#accordion").accordion();

Needed this:
$(".accordion").accordion({
collapsible: true,
active: false,
autoHeight: false,
heightStyle: "content" //<- this fixes the problem with the squished height
});

Looks like your issue is the autoHeight option.
You can either set it false as such: autoHeight: false,
-OR-
you can use autoHeight: true, and add heightStyle: "content", afterwards.
Source:
JQuery Accordion Auto Height issue

jQuery trigger h1 color change using CSS and Maximage slider

I'm trying to change the color of a h1 tag depending on the current active slide.
Basically, as the slide changes, so does the h1's color through the use of a data-main-color attribute.
I'm using the Maximage slider.
I understand that I've made no attempt to trigger the change on an event, this is where my knowledge has hit a wall... so any help would be great.
My code
HTML:
<div id="maximage">
<div>
<img src="images/homepage_1.jpg" alt="" />
<div class="in-slide-content" data-main-color="#000"></div>
</div>
<div>
<img src="images/homepage_2.jpg" alt="" />
<div class="in-slide-content" data-main-color="#FFF"></div>
</div>
<div>
<img src="images/homepage_3.jpg" alt="" />
<div class="in-slide-content" data-main-color="#000"></div>
</div>
<div>
<img src="images/homepage_4.jpg" alt="" />
<div class="in-slide-content" data-main-color="#FFF"></div>
</div>
<div>
<img src="images/homepage_4.jpg" alt="" />
<div class="in-slide-content" data-main-color="#000"></div>
</div>
</div>
Once Maximage has done its thing:
<div id="maximage" class="mc-cycle">
<div class="mc-image" style="background-image: url(http://box.dev/box-v1.0/images/homepage_1.jpg);">
<div class="in-slide-content" data-main-color="#000"></div>
</div>
<div class="mc-image" style="background-image: url(http://box.dev/box-v1.0/images/homepage_2.jpg);">
<div class="in-slide-content" data-main-color="#FFF"></div>
</div>
<div class="mc-image" style="background-image: url(http://box.dev/box-v1.0/images/homepage_3.jpg);">
<div class="in-slide-content" data-main-color="#000"></div>
</div>
<div class="mc-image" style="background-image: url(http://box.dev/box-v1.0/images/homepage_4.jpg);">
<div class="in-slide-content" data-main-color="#FFF"></div>
</div>
<div class="mc-image" style="background-image: url(http://box.dev/box-v1.0/images/homepage_5.jpg);">
<div class="in-slide-content" data-main-color="#000"></div>
</div>
</div>
JS:
(function ($) {
$('#maximage').maximage({
cycleOptions: {
pager: '#maximage',
activePagerClass: 'active',
fx:'scrollUp',
easing: 'easeOutSine',
speed: 1000,
timeout: 6000,
prev: '#arrow_left',
next: '#arrow_right'
},
onFirstImageLoaded: function(){
$('#loader').hide();
$('#maximage').fadeIn('fast');
}
});
$(window).bind("load", function() {
$(".mc-image").each(function () {
var mainColor = $(".mc-image.active").find(".in-slide-content").data("main-color");
$(".page-title > h1").css({
color: mainColor
});
});
});
}(jQuery));

Thanku for your code my text get change by doing this..
first find currentimage using current object and use that object nd apply your function
$(function() {
$('#maximage').maximage({
cycleOptions: {
fx: 'fade',
speed: 6000, // Has to match the speed for CSS transitions in jQuery.maximage.css (lines 30 - 33)
timeout: 5000,
prev: '#arrow_left',
next: '#arrow_right',
pause: 0,
before: function(last, current) {
var myfont = $(current).find(".in-slide-content").data("main-color");
$("#about").css({
"color":myfont
});
$("#about>h1").css({
"color": myfont
});
if (!$.browser.msie) {
// Start HTML5 video when you arrive
if ($(current).find('video').length > 0) $(current).find('video')[0].play();
}
},
after: function(last, current) {
if (!$.browser.msie) {
// Pauses HTML5 video when you leave it
if ($(last).find('video').length > 0) $(last).find('video')[0].pause();
}
}
},
onFirstImageLoaded: function() {
jQuery('#cycle-loader').hide();
jQuery('#maximage').fadeIn('fast');
}
});
// Helper function to Fill and Center the HTML5 Video
jQuery('video,object').maximage('maxcover');
});

Solved:
(function ($) {
$('#maximage').maximage({
cycleOptions: {
pager: '#maximage',
activePagerClass: 'active',
fx:'scrollUp',
easing: 'easeOutSine',
speed: 1000,
timeout: 6000,
prev: '#arrow_left',
next: '#arrow_right',
after: onAfter
},
onFirstImageLoaded: function(){
$('#loader').hide();
$('#maximage').fadeIn('fast');
}
});
function onAfter() {
var mainColor = $(".mc-image.active").find(".in-slide-content").data("main-color");
$(".page-title > h1").css({
color: mainColor
});
}
}(jQuery));