I have been trying to figure out how to use the contextMenu.js plugin from s-yadav.
I've downloaded the js and css files and saved them into the same folder as my php script.
The examples for the plugin are on this page: http://ignitersworld.com/lab/contextMenu.html#demo
However, I'm struggling to figure out how to activate them on the page. I assume I need to call the plugin and then the script needs to go between tags.
However, this does not produce anything. The code is below. Can anyone point me in the right direction?
Thank you
<head>
<link rel="stylesheet" type="text/css" href="contextMenu.css" />
<script src="contextMenu.js"></script>
</head>
<body>
<script>
//For example we are defining menu in object. You can also define it on Ul list. See on documentation.
var menu = [{
name: 'create',
img: 'images/create.png',
title: 'create button',
fun: function () {
alert('i am add button')
}
}, {
name: 'update',
img: 'images/update.png',
title: 'update button',
fun: function () {
alert('i am update button')
}
}, {
name: 'delete',
img: 'images/delete.png',
title: 'delete button',
fun: function () {
alert('i am delete button')
}
}];
//Calling context menu
$('.testButton').contextMenu(menu);
</script>
<div id="testButton1" class="testButton iw-mTrigger">Click me</div>
</body>
In addition to moving your code after "Click me" div you need add jQuery library before contextmenu.js.
For example:
<head>
<link rel="stylesheet" type="text/css" href="contextMenu.css" />
<script type="text/javascript"
src=" http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js">
</script>
<script src="contextMenu.js"></script>
</head>
Also your code has links to the images (like img: 'images/update.png'), but I don't think you have them, so they will be shown as broken links.
You are calling the code before the element exists. If the element doesn't exist when the code is run it will simply fail quietly
Either move your script tag to bottom of <body> so the html it references precedes it or wrap the code as follows:
$(function(){
$('.testButton').contextMenu(menu);
});
See: ready() docs
Related
I hope someone can help me with this. I am using printThis.js to print a document. I have bootstrap.min.css located in the public folder. The thing is, I couldn't get it to work. I already tried possible answers but not working.
Here's my code at "barcode.blade.php". What I wanted is to make this.
loadCSS: "{{ asset('Admin/bower_components/bootstrap/dist/css/bootstrap.min.css') }}"
work. Thanks!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{{ asset('Admin/plugins/datatables/dataTables.bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('Admin/bower_components/bootstrap/dist/css/bootstrap.min.css') }}">
<style>
.row{
margin: 50px;
}
p{
margin-top: 10px;
}
</style>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<div class="container">
<div class="row">
#foreach($barcodes as $barcode)
<div class="col-md-4">
<img src="data:image/png;base64,{{DNS1D::getBarcodePNG($barcode->pxbarcode, 'C128A')}}" />
<p>{{$barcode->pxbarcode}}</p>
</div>
#endforeach
</div>
</div>
<div class="w3-right footer">
<button id="print" class="w3-button w3-blue">Print</button>
Back
</div>
<script src="{{ asset('Admin/bower_components/jquery/dist/jquery.min.js')}}"></script>
<script src="{{ asset('js/printThis.js')}}"></script>
<script>
$('#print').click(function(){
$('.container').printThis({
debug: false, // show the iframe for debugging
importCSS: true, // import parent page css
importStyle: false, // import style tags
printContainer: true, // print outer container/$.selector
loadCSS: "{{ asset('Admin/bower_components/bootstrap/dist/css/bootstrap.min.css') }}", // path to additional css file - use an array [] for multiple
pageTitle: "", // add title to print page
removeInline: false, // remove inline styles from print elements
removeInlineSelector: "*", // custom selectors to filter inline styles. removeInline must be true
printDelay: 333, // variable print delay
header: "<h2>Print Barcode</h2>", // prefix to html
footer: null, // postfix to html
base: false, // preserve the BASE tag or accept a string for the URL
formValues: true, // preserve input/form values
canvas: false, // copy canvas content
doctypeString: '<!DOCTYPE html>', // enter a different doctype for older markup
removeScripts: false, // remove script tags from print content
copyTagClasses: false, // copy classes from the html & body tag
beforePrintEvent: null, // callback function for printEvent in iframe
beforePrint: null, // function called before iframe is filled
afterPrint: null // function called before iframe is removed
});
})
</script>
</body>
</html>
This is how it looks when i click the print button.
As you can see, I'm using a bootstrap in my blade and it is not taking effect when I print it.
just import your bootstrap like that
<link href="URL to bootstrap.min.css" rel="stylesheet" media='all'/>
and call printThis like that :
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="{{ asset('assets/js/printThis.js') }}"></script>
<script type="text/javascript">
var j = jQuery.noConflict(true);
$("#printBtn").click(function () {
j('#divToPrint').printThis({
importCSS: true,
loadCSS: true,
canvas: true
});
})
</script>
It worked perfectly for me ... (btw : I'am using symfony 4 with twig as Template engine)
var options = {
loadCSS: "css/bootstrap.min.css"
}
$('#printButton').on('click', function () {
$('.container').printThis(options);
});
OR
$('#printButton').on('click', function () {
$('.container').printThis({
loadCSS: "css/bootstrap.min.css"
});
});
Probably I'm misunderstanding something about Fancybox v1 but have the following minor issue. First I'm calling fancybox via clicking a link:
$(document).ready(function() {
$(".href").click(function() {
$.fancybox.open({
href : $(this).attr("data-id"),
type : 'iframe'
});
});
});
This loads a simple PHP/HTML page with JS, to be populated into the Fancybox window:
<!DOCTYPE html><html><head><title></title></head>
<body>
<?php
# this is the fancybox content
echo "<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script> Some other content to show on fancybox.";
?>
</body></html>
The content appears without a problem, but the nuance is, the document.write value is echoed after the closing </script> tag: and this makes the content visible on the page, not the document.write() function. You can see this in the source code:
<body>
<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script>**random_text** Some other content to show on fancybox.
</body>
The problem seems to be with fancybox, if I use the document.write() on a standard HTML (not fancyboxed) page, as expected, it will correctly show 'random_text' on the page, inside <script></script> only. This is the source code:
<body>
<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script> Some other content to show on fancybox.
</body>
What I'd need is if I open the fancbox window, 'random_text' shouldn't appear literally after the closing </script> tag, but would be displayed only by the document.write() function.
This is how I tested:
main page:
<html>
<head>
<title></title>
<meta name="" content="">
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.2" media="screen" />
</head>
<body>
<div data-id="fancy.php" class="href">open fancy</div>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.3"></script>
<script>
$(document).ready(function() {
$(".fancybox").fancybox();
$(".href").click(function() {
$.fancybox.open({
href : $(this).attr("data-id"),
type : 'iframe'
});
});
});
</script>
<div id="theid" class="fancybox"></div>
</body>
</html>
and the page being opened in fancybox: fancy.php
<html>
<head>
<title></title>
</head>
<body>
<?php
$randomtext = "random_text";
echo "<script>var dcwrtext = '$randomtext'; document.write(dcwrtext);</script>Some other content to show on fancybox";
?>
</body>
</html>
[I had to include jquery-migrate-1.2.1.js because of an error [ Uncaught TypeError: Cannot read property 'msie' of undefined] when including newer versions of jquery with fancybox]
Salutations! I would like to create an alert box which echo a button connected to a link. I would like to do the whole thing using php. I would like to put that piece of code in my codeigniter controller function.
Here is a piece of code that can echo a button connected to a link:
echo 'Add to Google Contacts';
Please help me to do my task. Thanks a lot.
Alert is a special kind of method which is only used for Showing some messages,with a button is attached.Only we can write text in it.If you want an alert box with your own components, design a new one yourself.But it will never become an alert box.By using jquery you can do this ..paste it.
Here is the Jquery code for dialog box,paste it.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style></style>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src='template/js/jquery.textarea-expander.js'></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
// <---- VENTAÑAS DE PARAMETERES---->
$(document).ready(function() {
var regex,v,l,c,b,i,contapara=3;
$( "#wnd_Addparam" ).dialog({
autoOpen: false,
height: 'auto',
width: 350,
modal: true,
resizable:false,
buttons: {
"Link": function() {
location.href="http://www.google.com";
return false; },
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: {}
});
$( "#wnd_Addparam" ).dialog( "open" );
});
</script>
<body>
<div id="wnd_Addparam" title="Information" ></div>
</body>
</html>
Hope this will help you dr..
You can use it with JavaScript to like,
echo "<a href='onclick='javascript:function(id)''></a>";
and the javascript you can use it by,
function(id)
{
window.location.href("file_name.php")
}
echo "<a href='#'><button onclick='".'alert("your alert message")'."'>Try it</button>";
I have jquery plugin but on page load it works but when I integrate it with my php script it seems not to load.I have check paths but to no success. as soon as the page loads i want the window to show onload check out my code i put in the head tag please excuse the formatting:
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>SimpleModal Basic Modal Dialog</title>
<meta name='author' content='Eric Martin'
/>
<meta name='copyright' content='2012 - Eric Martin' />
<link type='text/css' href='../css/demo.css' rel='stylesheet' media='screen'
/>
<link type='text/css' href='../css/basic.css' rel='stylesheet' media='screen'
/>
<script>
window.onload = function () {
$(document).ready(function () {
$('#basic-modal-content').modal();
return false;
});
$('#modalContentTest').modal({
onShow: function (dialog) {
var sm = this;
dialog.container.animate({
height: 300,
width: 300
}, 500, function () {
sm.setPosition();
});
}
});
};
</script>
<style>
.noTitle .ui-dialog-titlebar {
display:none;
}
</style>
</head>
....between body tags i have the php script
I think your problem is in the combination of window.onload and jquery $(document).ready.
The "ready" method is triggered when the DOMContentLoaded event is triggered (jQuery simulates this on browsers that do not support it), while window.onload triggers when all additional content (css, images) is loaded - which happens afterwards.
So by the time you bind the "ready" event, the event has already been triggered and will not trigger again.
I suggest removing the window.onload wrapper function.
$('#modalContentTest').modal({
onShow: function (dialog) {
var sm = this;
dialog.container.animate({
height: 300,
width: 300
}, 500, function () {
sm.setPosition();
});
}
});
$(document).ready(function () {
$('#basic-modal-content').modal();
return false;
});
Here are some details on these two events
Another concern I have is that the id of the declared modal (#modalContentTest) is different from the one you are trying to trigger (#basic-modal-content)
I have a story uploading system on my webpage, which uploads stories in a specified folder, and from that it lists their content to the webpage. I split the text, so only 300 chars are shown of the text, and when the user clicks it the rest is shown.
This one lists it:
<?php foreach($dataArray as $data) { ?>
<div class="visible">
<?php echo $data[0] . "<br/><center><a href='#' class='story_show'>Teljes Történet</a></center>"; ?>
</div>
<div class="hidden">
<?php echo $data[1]; ?>
</div>
<?php } ?>
This is my jQuery:
$('.hidden').css('display', 'none');
$('.visible').click(function () {
$('.hidden').css('display', 'inline');
});
This page(tortenetek.php) is loaded via Ajax to the main page (blog.php). I included jQuery in blog.php like this:
<link href='http://fonts.googleapis.com/css?family=Niconne&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../css/stilus.css"/>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/tinybox.js"></script>
<script type="text/javascript" src="../js/ajax.js"></script>
<link href="../css/lightbox.css" rel="stylesheet" />
<script src="../js/lightbox.js"></script>
<script src="../js/story.js"></script>
Story.js is the script file I'm using.
If I've understood your question correctly then you need to take advantage of event delegation, by changing your .click() call to a .on() call, and passing a selector matching an ancestor element that is always in the DOM:
$('#someAncestor').on('click', '.visible', function(){
$(this).next('.hidden').css('display', 'inline');
});
Notice the change in the event handler function to use this and .next(). The way you currently have it will show all .hidden elements when you click on any .visible element.
#someAncestor needs to be an element that is present in the DOM at the time the code is executed. This works because most DOM events bubble up from the element on which they originate (the target) through the tree. You can capture that event at any ancestor element.