Can I write a custom confirm box in JavaScript that, instead of the default OK and CANCEL button, shows a SAVE and DELETE button?
Use the jQuery UI Dialog Box for this.
You can do something like this:
JS:
$(function() {
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Do it": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
});
<link href="https://jqueryui.com/jquery-wp-content/themes/jquery/css/base.css" rel="stylesheet"/>
<link href="http://jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog-confirm" title="Is it treason, then?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Am I the Senate?</p>
</div>
Not with the native JavaScript confirm box. You could use one of the many JavaScript UI components that emulate modal dialogs to do this instead.
Here's an example: https://jqueryui.com/dialog/#modal-confirmation
I've never used this so use at your own risk.
$('confirm text').dialog(
{
modal:true, //Not necessary but dims the page background
buttons:{
'Save':function() {
//Whatever code you want to run when the user clicks save goes here
},
'Delete':function() {
//Code for delete goes here
}
}
}
);
This should work, but you will need to download or link to jQuery and the jQuery UI libraries to run this.
Related
Forgive me if this is an obvious question.
I'm working on a page with a script I can't remove or alter. A button is clicked, which loads some items onto the page with an ajax request, and then triggers an annoying scrolljacking animation for the page.
The goal: I still want the items to load when the button is clicked, but I don't want the scroll animation.
I'm able to add my own custom js to the page (below where the default script is added). How do I interrupt or override the original script to remove the scrolling behaviour?
Here's a simplified example.
.group{
background: cyan;
height:400px;
width:400px;
margin:10px
}
.load-more{
background:#88f;
width:360px;
text-align:center;
margin:10px;
padding:20px;
cursor:pointer;
}
<!-- markup -->
<div class="groups-listing">
<div class="group"></div>
</div>
<div class="load-more">Load more</div>
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(".load-more").click(function () {
//loading another item
$(".groups-listing").append('<div class="group"></div>');
//annoying animated scrolling
$("html, body").animate(
{
scrollTop: $(".groups-listing .group").last().offset().top
},2000
);
});
</script>
<script>
// custom js, override must go here.
</script>
The actual problem can be found here: https://obsu.unionclouduat.org/groups
I think my simplified example is analagous, but I'm not 100% sure.
You can try to unbind() and reasign the event ?
// custom js, override must go here.
$(".load-more").unbind().click(function () {
//loading another item
$(".groups-listing").append('<div class="group"></div>');
});
In this demo http://jsfiddle.net/pHJgP/8/ an image gets replaced with a text
I'd like to do the same on a blogger post http://myblog.blogspot.com/2015/06/firstpost.html
This code goes into post body:
<div id="outer"><img src="http://existdissolve.com/wp-content/uploads/2010/08/microsoft-logo-64x64.png"/></div>
<div id="text" style="display:none">Text here</div>
Where do I put this code?
$(document).ready(function()
{
setTimeout(function()
{
$("div#outer").fadeOut("slow", function ()
{
$("div#outer img").remove();
$("div#outer").html($("div#text").text());
$("div#outer").show();
});
}, 3000);
});
Do I need to add an operator to invoke the function or action in this particular post http://myblog.blogspot.com/2015/06/firstpost.html when it opens? And where/how do I add that operator or trigger code?
What else is missing ?
Before asking I've read several posts on stackoverflow.com , on w3schools.com , etc. experimented but failed due to the lack of knowledge.
place this code just above or before </head>
<script src='http://code.jquery.com/jquery-1.7.2.js'/>
<script type='text/javascript'>
$(document).ready(function()
{
setTimeout(function()
{
$("div#outer").fadeOut("slow", function ()
{
$("div#outer img").remove();
$("div#outer").html($("div#text").text());
$("div#outer").show();
});
}, 3000);
});
</script>
Note: 1.7.2 is taken from the top left corner of the demo http://jsfiddle.net/pHJgP/8/
if 1.7.2 did not work, try other versions.
I am not a PRO. And this is all I know from experimenting.
I could be wrong
I have an accordion element in my page. The problem is that the accordion appears on the page but it is not clickable. By 'not clickable', I mean that when I click on the header it does not expand to reveal the contents. Nothing happens at all. I hope someone can help.
Thanks in advance.
Your jQuery.js module must be loaded before the semantic-ui accordion.js
module.
Simply put
<script src="js/accordion.js"></script>
after
<script src="js/vendor/jquery-1.11.2.min.js"><\/script>
( or whatever your jQuery version is ... )
and initialize the accordion in the html document inside a script tag as :
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>
It happens on nested accordions while you script is under $( document ).ready(function()
So try to call accordion function in an ajax callback like this;
$('input[name=sampleInput]').on('input', function() {
var val = $("input[name=sampleInput]").val();
if (val.length >= 3)
{
$.ajax( {
url: 'sample_handler.php',
type: 'GET',
data: {
data: data
},
dataType: 'html',
success: function ( response ) {
$('.ui.accordion').accordion({});
}
})
}
})
For instance, I've put accordion function in a callback. So I could use it again and again, even I add nested accordions.
In my case I had syntax errors inside javascript/jQuery. After fixing that and importing jQuery module before semantic-ui it works. You can open development tools in the browser and check the console for errors in javascript (F12 in Chrome).
<script type="text/javascript">
$(document).ready(function() {
window.onload = function(){
$('.ui.accordion').accordion();
};
});
</script>
I'm trying to embed Google Translate snippet in my website, but for some reason it is not even displayed.
I go here:
Google tools
Copy this:
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Paste it to my webpage.
And I don't see it there.
What am I missing?
Some HTML maybe?
Here is a working example. I think you are missing "&ug=section&hl={LANGUAGE}" parameters:
My Page
Тестирование
<script>
function googleSectionalElementInit() {
new google.translate.SectionalElement({
sectionalNodeClassName: 'translate',
controlNodeClassName: 'translate_control',
background: '#f4fa58'
}, 'google_sectional_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>
http://jsfiddle.net/maxim75/H3Wkr/ - working example
In the HTML, the 'control' class element needs to be nested in the 'section' element. :)
I'm using jQuery UI to allow my page elements to be resizable, but I'd like to set custom handles. I've tried what I think should work, but it doesn't.
The basic html is:
<div id="element_x" class="resizable">
<div id="overlay_x" class="element_buttons">
<div id="resize_element_x" class="resize_element ui-resizable-handle ui-resizable-se"><img src="images/site/handle_resize.png" border=0 title="Resize this element" /></div>
</div>
</div>
I set it up like this:
var reposition = '';
$(function() {
$( ".resizable" ).resizable({
containment: "#viewPage",
handles: {"e,s,se" : { e: '.ui-resizable-e', s: '.ui-resizable-s', se: '.ui-resizable-se'}},
resize: function(event, ui){
reposition = ui.position;
}
});
});
This produces the correct handle in the right place, but when I try to resize, it just doesn't do anything! What might be wrong, or is there a better way to do this?
Your custom handle syntax is wrong. This works for me:
var reposition = '';
$(function() {
$( ".resizable" ).resizable({
containment: "#viewPage",
handles: { 'e': '.ui-resizable-e', 's': '.ui-resizable-s', 'se': '.ui-resizable-se'},
resize: function(event, ui){
reposition = ui.position;
}
});
});
The solution is not mine, but it shows exactly what the problem and the solution is:
<p>jQuery UI #4310 - Custom resizable handles do not work unless the ui-resizable-xy and ui-resizable-handle classes are added.</p>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<div class="container">
<div class="border bottom_right ui-resizable-se ui-resizable-handle"></div>
</div>
<script>
$(function() {
$('.container').resizable({
handles: { se: '.bottom_right' }
});
});
</script>
For me it works! :)
http://jsfiddle.net/tj_vantoll/pFfKz/