I'm using this code : http://codepen.io/andytran/pen/xweoPN/ to create an information card slider but i think the code <div class="card"> is having some problems when put in a modal.
I've created a pen with my current code, Kindly review it and suggest the changes to remove that blank card while clicking on the modal. https://codepen.io/anon/pen/bWmYxN
In the first card a blank card with the text how it works is present, how to remove that blank card?
I am not quite familiar with the libraries that you used here. But anyway, something like this can fix your issue if nothing else works out.
$("#modalBtn").click(function() {
setTimeout(
function(){
$("#next").click();
}, 250
);
});
EDIT:
Sorry about that, I forgot that you should add an ID to your button that calls the modal.
<button id="modalBtn" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
you just need to put this code only in $(document).ready
window.setTimeout(function() {
$('#myModal.products').height(283);
},200);
so your jquery code will be
$(document).ready(function() {
window.setTimeout(function() {
$('#myModal.products').height(283);
},200);
var getProductHeight = $('.product.active').height();
$('.products').css({
height: getProductHeight
});
function calcProductHeight() {
getProductHeight = $('.product.active').height();
$('.products').css({
height: getProductHeight
});
}
function animateContentColor() {
var getProductColor = $('.product.active').attr('product-color');
$('body').css({
background: getProductColor
});
$('.title').css({
color: getProductColor
});
$('.btn').css({
color: getProductColor
});
}
var productItem = $('.product'),
productCurrentItem = productItem.filter('.active');
$('#next').on('click', function(e) {
e.preventDefault();
var nextItem = productCurrentItem.next();
productCurrentItem.removeClass('active');
if (nextItem.length) {
productCurrentItem = nextItem.addClass('active');
} else {
productCurrentItem = productItem.first().addClass('active');
}
calcProductHeight();
animateContentColor();
});
$('#prev').on('click', function(e) {
e.preventDefault();
var prevItem = productCurrentItem.prev();
productCurrentItem.removeClass('active');
if (prevItem.length) {
productCurrentItem = prevItem.addClass('active');
} else {
productCurrentItem = productItem.last().addClass('active');
}
calcProductHeight();
animateContentColor();
});
// Ripple
$('[ripple]').on('click', function(e) {
var rippleDiv = $('<div class="ripple" />'),
rippleSize = 60,
rippleOffset = $(this).offset(),
rippleY = e.pageY - rippleOffset.top,
rippleX = e.pageX - rippleOffset.left,
ripple = $('.ripple');
rippleDiv.css({
top: rippleY - (rippleSize / 2),
left: rippleX - (rippleSize / 2),
background: $(this).attr("ripple-color")
}).appendTo($(this));
window.setTimeout(function() {
rippleDiv.remove();
}, 1900);
});
});
Thats it
Hope this helps
The problem was I forgot assigning the active class to the product class
<div class="product-active">
this will make the first screen to appear and if there's no active class, then it'll show a blank screen since it doesn't know what to show. A small typo got me on feet. Anyways, this is for the future reference if anyone makes a silly mistake like this.
Thanks.
Related
I have tried a few things currently from what I could search online however I, unfortunately, haven't found anything.
enter image description here
I would like to disable the pagination when I click on the replace button. Since it's loading with a spinner and there is a wait I thought it would make sense to disable it but not remove it. I know how to remove, both on the css side and angularjs. However, in all honesty, I am unsure how to disable this particular feature compared to other works that I have done.
HTML:
<button class="btn btn-blue" ng-click="handleLoadAndDeactivate()"
ng-show="'Load' == importAction && 0 == errors"
title="Load">
Replace
</button>
AngularJS (Button):
$scope.handleLoadAndDeactivate = function () {
$scope.onCompleteData.targetBody.withDeactivation = true;
onComplete($scope.onCompleteData, $scope.handleLoadAndDeactivateCompleted);
};
AngularJS (Table):
$scope.operationsPreloadCompletedTableOptions = new NgTableParams({}, {
dataset: importLog
});
html
Here's how you could achive this:
(function () {
"use strict";
const app = angular.module("app", []);
app.controller("app.AppCtrl", ($scope, $timeout) => {
$scope.disablePagination = false;
$scope.handleReplace = () => {
$scope.disablePagination = true;
//Your replace logic goes here
$timeout(() => {
$scope.disablePagination = false;
}, 2000);
};
}
);
})();
body {
margin: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="app.AppCtrl">
<button ng-disabled="disablePagination"><</button>
<button ng-disabled="disablePagination">1</button>
<button ng-disabled="disablePagination">2</button>
<button ng-disabled="disablePagination">></button>
<button ng-click="handleReplace();">Replace</button>
</div>
I want to display a modal when a button is clicked but is not working. Here the code:
<button class="button is-warning is-pulled-right" onclick="refs.modalEdicion.open()">
<span>Editar</span>
</button>
<div class="modal" id="modalEdicion">
<div class="modal-background"></div>
<div class="modal-content">
<p class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="">
</p>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
Before starting, easy way to open modal should be like this;
yourElem.classList.toggle('is-active')
In my project, I have many modals. So I didn't always want to use like above. Because of this, I have created a basic modal event listener. I know this isn't enough for you. Because there will be other situations to open and close modals.
In this case, you can open and close your modals even you can listen to show and close events.
I used this Mozilla resource to create custom events. For example, you want to create two events called modal:show and modal:close. To make this, you should write some codes like below:
On Show Event
var event = new Event('modal:show')
yourElem.dispatchEvent(event);
On Close Event
var event = new Event('modal:close')
yourElem.dispatchEvent(event);
Now, we can listen to the above events.
An Example to Listen to Show Event
yourElem.addEventListener('modal:show', function() {
console.log("opened")
})
An Example to Listen to Close Event
yourElem.addEventListener("modal:close", function() {
console.log("closed")
})
We know how to open and close modal from easy way section. But sometimes users can click the modal background or "X" or Cancel buttons. If so, we need to handle these events. To make this we can use this code
var modalClose = yourelem.querySelectorAll("[data-bulma-modal='close'],
.modal-background")
modalClose.forEach(function(e) {
e.addEventListener("click", function() {
yourelem.classList.toggle('is-active')
var event = new Event('modal:close')
yourelem.dispatchEvent(event);
})
})
That's all. We know how to open or close a Bulma modal. Even we can listen to their show and close events. Let's make it a little simpler
Creating A BulmaModal Class
class BulmaModal {
constructor(selector) {
this.elem = document.querySelector(selector)
this.close_data()
}
show() {
this.elem.classList.toggle('is-active')
this.on_show()
}
close() {
this.elem.classList.toggle('is-active')
this.on_close()
}
close_data() {
var modalClose = this.elem.querySelectorAll("[data-bulma-modal='close'],
.modal-background")
var that = this
modalClose.forEach(function(e) {
e.addEventListener("click", function() {
that.elem.classList.toggle('is-active')
var event = new Event('modal:close')
that.elem.dispatchEvent(event);
})
})
}
on_show() {
var event = new Event('modal:show')
this.elem.dispatchEvent(event);
}
on_close() {
var event = new Event('modal:close')
this.elem.dispatchEvent(event);
}
addEventListener(event, callback) {
this.elem.addEventListener(event, callback)
}
}
Usage
var btn = document.querySelector("#btn")
var mdl = new BulmaModal("#myModal")
btn.addEventListener("click", function () {
mdl.show()
})
mdl.addEventListener('modal:show', function() {
console.log("opened")
})
mdl.addEventListener("modal:close", function() {
console.log("closed")
})
Let's look at this simple snippet
class BulmaModal {
constructor(selector) {
this.elem = document.querySelector(selector)
this.close_data()
}
show() {
this.elem.classList.toggle('is-active')
this.on_show()
}
close() {
this.elem.classList.toggle('is-active')
this.on_close()
}
close_data() {
var modalClose = this.elem.querySelectorAll("[data-bulma-modal='close'], .modal-background")
var that = this
modalClose.forEach(function(e) {
e.addEventListener("click", function() {
that.elem.classList.toggle('is-active')
var event = new Event('modal:close')
that.elem.dispatchEvent(event);
})
})
}
on_show() {
var event = new Event('modal:show')
this.elem.dispatchEvent(event);
}
on_close() {
var event = new Event('modal:close')
this.elem.dispatchEvent(event);
}
addEventListener(event, callback) {
this.elem.addEventListener(event, callback)
}
}
var btn = document.querySelector("#btn")
var mdl = new BulmaModal("#myModal")
btn.addEventListener("click", function () {
mdl.show()
})
mdl.addEventListener('modal:show', function() {
console.log("opened")
})
mdl.addEventListener("modal:close", function() {
console.log("closed")
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet"/>
<div class="modal" id="myModal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close" data-bulma-modal="close"></button>
</header>
<section class="modal-card-body">
<p>There is something here</p>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button" data-bulma-modal="close">Cancel</button>
</footer>
</div>
</div>
<button id="btn">Click active Modal</button>
I hope this answer will help Bulma newbies.
Bulma CSS is a CSS only framework and all the javascript behaviour has to be written manually. That means for a modal all the CSS classes for hiding and showing the modal has been written and you have to just bind the events properly. If you visit the Modal doc page (https://bulma.io/documentation/components/modal/) you can see a No Javascript warning stating that
Bulma does not include any JavaScript interaction. You will have to
implement the class toggle yourself.
Just define refs.modalEdicion.open function to add class is-active as per the doc and bind events on close button to remove the same CSS class. Optionally you might wish to bind the event to the overlay element as well if you want to dismiss modal by clicking the overlay.
Here is the desired implementation. https://codepen.io/anon/pen/KRaqxG
I ran into this problem this week and I found this link. It contains Official (according to it) Bulma Modal Doc page's javascript code. I copied and reduced it by a line or two and it works for all bulma modals you will have in your code.
Note that this is pretty open code. Ali's answer is ideal route to follow but if you don't want to spend time writing codes for modals, then just copy this segment in your code.
document.addEventListener('DOMContentLoaded', function () {
// Modals
var rootEl = document.documentElement;
var allModals = getAll('.modal');
var modalButtons = getAll('.modal-button');
var modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
if (modalButtons.length > 0) {
modalButtons.forEach(function (el) {
el.addEventListener('click', function () {
var target = document.getElementById(el.dataset.target);
rootEl.classList.add('is-clipped');
target.classList.add('is-active');
});
});
}
if (modalCloses.length > 0) {
modalCloses.forEach(function (el) {
el.addEventListener('click', function () {
closeModals();
});
});
}
document.addEventListener('keydown', function (event) {
var e = event || window.event;
if (e.keyCode === 27) {
closeModals();
}
});
function closeModals() {
rootEl.classList.remove('is-clipped');
allModals.forEach(function (el) {
el.classList.remove('is-active');
});
}
// Functions
function getAll(selector) {
return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
}
});
Okay first of all, you need to have posted your javascript and css for a relevant answer but I'll outline the way I do it.
You could implement like below:
//One Modal
function OpenModal() {
//Get element with Id= "modal"
var modal = document.getElementById("modal");
//Change style to display = "block"
modal.style.display = "block";
}
//Multiple Modals
function OpenMore(n) {
//Get elements with class="modal" into an array
var modal = document.getElementsByClassName("modal");
//Change style of modal number [n] to display = "block"
modal[n].style.display = "block";
}
//This will close the modal once you click on it
window.onclick = function(event) {
//For single modal
var modal = document.getElementById("modal");
//If the click was on the modal the modal style display = "none"
if (event.target == modal) {
modal.style.display = "none";
}
//For multiple modals
var more = document.getElementsByClassName("modal");
//i represents which modal. It will go through all modals
for (var i = 0; i < more.length; i++) {
//If the click was on the modal for one of the modals display = "none"
//for all of them
if (event.target == more[i]) {
more[i].style.display = "none";
}
}
}
.modal {
display: none;
background-color: yellow;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
}
#modal {
display: none;
background-color: yellow;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
}
.button {
margin: 50px auto;
}
<!-- For One Modal -->
<button class="button" onclick="OpenModal()"> SingleModal </button>
<div id="modal"> hardidar </div>
<!-- For Multiple Modals -->
<button class="button" onclick="OpenMore(0)"> MultipleModal1 </button>
<div class="modal"> 1st Modal </div>
<button class="button" onclick="OpenMore(1)"> MultipleModal2 </button>
<div class="modal"> 2nd Modal </div>
The idea is that the initial display of the modal per the css rules is display: none once you click on the button the Javascript method will run and change this to display:block
You could change this behavior to do quite a bit. You could toggle a class you could change the transform: scale() which is my personal preference.
The example is a working one.
Try this code
$(document).ready(function() {
$("#your_id_button").click(function() {
$("#id_modal").addClass("is-active"); // modal is open
});
$("#your_id_button_close").click(function() {
$("#id_modal").removeClass("is-active"); // modal is close
});
});`
I am trying to use css style in directive, the style is coming but it is not coming continuously when I am clicking the button.
For example, I have a button and a css style(bouncing style) and also I am having a directive.
If I click that button many times that bouncing style also have to come continuously , but I am not getting the style continuously.
I also used $watch in that also only once the style is coming.
<div class="row">
<button class="btn btn-primary" ng-click="qty=qty-1">-</button>
<span my-directive="qty" class="box " ng-bind="qty">{{qty}}</span>
<button id="target" class="btn btn-primary" ng-click="qty=qty+1">+</button>
angular.module('docsSimpleDirective', []).controller('Controller', ['$scope', function($scope) {
$scope.qty =1; }]).directive('myDirective', function() {
return {
restrict:'A',
link:function(scope,elem,attr){
var btn = document.getElementById('target');
btn.addEventListener('click', moveMe);
function moveMe() {
console.log("coming to move");
elem.addClass('bounce');
}
/* scope.$watch(attr.myDirective, function (newValue, oldValue) {
if (newValue !== oldValue) {
console.log("$watch");
console.log(newValue, oldValue);
elem.addClass('bounce');
}
});*/
}
}; });
Here is my plunker
Can you please solve my problem?
Thanks in advance!
You need to remove class bounce after execution of moveMe function. Can use callback function.
function moveMe() {
console.log("coming to move");
elem.addClass('bounce');
setTimeout(function() {
elem.removeClass('bounce');
}, 1000);
}
When you click on 'financial roadshows' for example, it opens. But when I click again, it closes temporarily and then opens again. I tried looking for the answer, but I'm just a gigantic noob when it comes to this one. I hope someone can help me out!
This is the code I used:
$(document).ready(function(){
$(".desc_div").slideUp();
$(".open_div").click(function(){
wrapper = $('#services_blocks'),
link = $(this);
$('.open_div.selected').next(".desc_div").slideUp('slow', function() {
$(this).prev().removeClass('selected');
});
link.addClass("selected").next(".desc_div").slideDown("slow");
});
});
and here is my JSfiddle:
http://jsfiddle.net/59f29b1L/
This can be done much easier with jQuery's slideToggle.
http://api.jquery.com/slidetoggle/
$(".open_div").click(function(){
$(this).next(".desc_div").stop().slideToggle( "slow" );
});
Try it out: http://jsfiddle.net/59f29b1L/6/
To fire the click event only once take a look at this answer.
<script>
$(document).ready(function(){
$(".desc_div").slideUp();
$(".open_div").click(function(){
if($(this).hasClass('selected')){
$(this).removeClass('selected');
$(this).addClass("selected").next(".desc_div").slideUp("slow", function() {
$(this).prev().removeClass('selected');
});
}
else{ $(this).addClass("selected").next(".desc_div").slideDown("slow");
}
});
});
</script>
Fiddle : jsfiddle
The drop down works here , hope it helps.
Changes :
$('.open_div.selected').next(".desc_div.down").slideUp('slow', function() {
$(this).prev().removeClass('selected');
$(this).removeClass('down').addClass('up');
});
link.addClass("selected").next(".desc_div.up").slideDown("slow", function() {
$(this).removeClass('up').addClass('down');
});
and also added a class in the html
<div class="desc_div up">
It can be done as simple as this!! Cheers..
jQuery(document).ready(function($){
$(".desc_div").hide();
$(".open_div").click(function(){
$(this).next().slideToggle("slow");
});
});
FIDDLE:
$('.open_div').click(function(){
$('.desc_div').toggle().toggleClass('selected');
});
i changed your fiddle over here: http://jsfiddle.net/59f29b1L/8/
first of all, you have to change the html.
make all open_divs wrap around your desc_div.
then use this code:
$(document).ready(function () {
$(".desc_div").hide(); // this is used to initally hide all desc_div
$(".open_div").click(function () { // define the click function
$(".desc_div", this).stop().slideToggle("slow"); //slide up/down depending on current state
});
});
you can change the line
$(".desc_div").hide();
to
$(".desc_div:gt(0)").hide();
Updated script of yours brother. I only add few changes on slide up script. Hope this will help.
$(document).ready(function(){
$(".desc_div").slideUp();
$(".open_div").click(function(){
wrapper = $('#services_blocks'),
link = $(this);
$('.open_div.selected').next(".desc_div").slideUp('slow', function() {
$(this).prev().removeClass('selected');
});
if($(this).next(".desc_div").css('display')=='none'){
link.addClass("selected").next(".desc_div").slideDown("slow");
}
});
});
DEMO FIDDLE
On One click of button, it shows the div and on another click it hides the div.
<button type="button" id="first">Click Me!</button>
<div id="something">Something</div>
<script>
$(document).ready(function(){
$('#something').hide();
$prevIndex = 0;
$i = 0;
$('#first').click(function(){
var index = $('#first').index($(this));
if(index == $prevIndex)
{ // if same
$i = $i;
}else{ // if not same
$i = 0;
}
if ($i % 2 === 0) {
/* we are even */
/* do first click */
$('#something').show();
} else {
/* we are odd*/
/* do second click */
$('#something').hide();
}
$i++;
$prevIndex = index;
});
});
</script>
I've got a jQuery code, which
$("a.reply").click(function() {
//code
});
When I click the link with .reply class the first time, nothing happens. The second time I click, the code inside the click function works.
The link is being inserted on the page using PHP from a mysql database. so it's not being inserted dynamically.
Why is this happening? Any solution?
The BadASS Code:
$(function(){
//TextArea Max Width
var textmaxwidth = $('#wrapper').css('width');
//Initialize Focus ids To Different Initially
var oldcommentid = -1;
var newcommentid = -2;
//End Of initialization
$("a.reply").click(function() {
newcommentid = $(this).attr('id');
if (newcommentid == oldcommentid)
{
oldcommentid=newcommentid;
$("#comment_body").focus();
}
else
{
$('#comment_form').fadeOut(0, function(){$(this).remove()});
var commetformcode = $('<form id="comment_form" action="post_comment.php" method="post"><textarea name="comment_body" id="comment_body" class="added_comment_body" rows="2"></textarea> <input type="hidden" name="parent_id" id="parent_id" value="0"/> <div id="submit_button"> <input type="submit" value="Share"/><input type="button" id="cancelbutton" value="Cancel"/></div></form>');
commetformcode.hide().insertAfter($(this)).fadeIn(300);
//
var id = $(this).attr("id");
$("#parent_id").attr("value", id);
oldcommentid=newcommentid;
//dynamicformcreation function
dynarun();
//
}
return false;
});
dynarun();
function dynarun()
{
//Form Re-Run Functions
$('#comment_body').elastic();
texthover();
$("#comment_form input, select, button").uniform();
textareasizer();
$("#comment_body").focus();
$("abbr.timestamp").timeago();
return false;
}
//TextArea Resizer Function
function textareasizer(){$("#comment_body").css('max-width', textmaxwidth);return false;}
//Other Miscellaneous Functions
$('.comment-holder').hover(
function(event) {
$(this).addClass('highlight');
},
function(event) {
$('.comment-holder').removeClass('highlight');
}
);
function texthover()
{
$('.added_comment_body').hover(
function(event) {
$(this).parent().parent().addClass('highlight');
},
function(event) {
$('.comment-holder').removeClass('highlight');
}
);
return false;
}
});
This is a longshot, but are you running some sort of tracking script? Like webtrends or coremetrics (or even some of your own script, that's globally looking for all clicks)? I ran into a similar problem a while ago, where the initial-click was being captured by coremetrics. Just a thought.
Does it still happen if you comment out all your code and simply have an alert("hi") inside the click function?
Update
I think Sarfaz has the right idea, but I would use the document ready function like so
$(document).ready(function(){
$("a.reply").click(function() {
//code
});
});
I just ran into same problem and I resolved my problem by removing:
<script src="bootstrap.js"></script>
you can use bootstrap.min.js
Use Inline CSS for hiding div and use JS/jQuery to show . This way Jquery Click Event will Fire On First Click
<div class="about-block">
<div class="title">About us</div>
<div class="" id="content-text" style="display:none;">
<p>Show me.</p>
</div>
</div>
<script>
var x = document.getElementById("content-text");
jQuery( '.about-block' ).click(function() {
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
});
</script>