dispatchEvent without scroll on object - dispatchevent

All works good, but in page i have scroll to this element, how i can disable scroll or how i can simulate click on btn without scroll to this button on page
var evt = new MouseEvent("click", {
view: window,
bubbles: true,
cancelable: false,
composed: false,
});
document.querySelector('.selectize-input').dispatchEvent(evt);
}
or how to document.querySelector('.selectize-input').click() without scroll?

Related

Hide and Unhide text using popper.js

I have the following popper.js script and I want that when I click a button a text appears and when I click the button again the text disappears. The script shown only unhide the text.
var ref = $('#button-a');
var popup = $('#popup');
popup.hide();
ref.click(function(){
popup.show();
var popper = new Popper(ref,popup,{
placement: 'bottom',
onCreate: function(data){
console.log(data);
},
modifiers: {
flip: {
behavior: ['bottom']
},
offset: {
enabled: true,
offset: '0,10'
}
}
});
});
Your event handler is never calling .hide() (I assume these are the JQuery show and hide functions?). You either need to use .toggle() instead of .show() or set up a conditional that handles the case where the popup is already visible and calls .hide().

Google Chrome Extension - Get DIV and Other Info Near Clicked Element

My Google Chrome Extension currently retrieves the ImageURL which was right-clicked from the menu, but that's not enough. I also need to do this:
Get the DIV Element inside which this specific Image was clicked.
Get some text strings stored inside this DIV, or in sub-DIVs, next
to the clicked image.
So far I have this, which is working:
background.js
// Add context menu for Images
chrome.contextMenus.create({
"title": "Get this Image",
"contexts": ["image"],
"onclick" : getInfo
});
function getInfo(e)
{
var imgURL = e.srcUrl;
// Set up an event which Content will receive
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {url: imgURL}, function(response) {
alert('Response in Background');
});
});
}
contentscript.js
// Listener for Background Event Sends
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
// print Image Src URL in a custom Content-created place
divHTML = request.url;
document.getElementById('infoDiv').innerHTML = divHTML;
});
Where do I do the extra work to analyze the DOM tree and retrieve extra surrounding elements? In the Background or in the Content?

Close Kendo window with kendo grid click event?

Have a function that opens a kendo window with a partial view(with a kendo grid) as content like so:
$('#CodUnePai').keydown(function (event) {
if (event.keyCode == 115) {
event.preventDefault();
var myWindow = $("#dialog").kendoWindow({
actions: ["Minimize", "Maximize", "Close"],
content: {
url: '#Url.Action("BSfunePartial","BSfune")',
},
draggable: true,
height: "300px",
width: "300px",
modal: false,
position: {
top: 300,
left: 1200
},
resizable: true,
title: "Unidades de Negócio",
visible: false
});
$("#dialog").data("kendoWindow").center();
$("#dialog").data("kendoWindow").open();
}
});
Im passing data to my CodUnePai when click the grid like so:
$("#BSfunePartialGrid").click(function (e) {
var selectedItem = e.target.innerText;
this.ownerDocument.forms.FormCreate.CodUnePai.value = selectedItem;
});
But i also want to close the window. How can i do that on the click or double click event of the grid? Can you help? Thank you.:)
You can do it by 2 ways
1st Way by adding close in action
$("#termWindow").kendoWindow({
modal: true,
visible: false,
resizable: true,
width: "700px",
title: "TopUp - Terms & Condition",
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
]
});
2nd by adding close button inside you template and calling close function
<div id="dialog"></div>
<script type="text/x-kendo-template" id="MessageBoxTemplate">
<div id="MessageBox-container">
<em>#= Message # </em>
<div style="text-align:center">
<input type="button" id="btnclose" name="btnclose" value="Close" onclick="closeMessageBox()">
</div>
</div>
</script>
//Close Function MessageBox
function closeMessageBox(e)
{
$("#MessageBox").data("kendoWindow").close();
}

Redirect URL within Facebox

Take the "Terms of Service" example found on the developers page. If you click on "Ok," I want the page to redirect elsewhere. I'm modifying this code to show an image and the "Ok" button is really a delete button. I have everything working, except I'm not sure how to tie that button into an action.
function picFunction(theurl) {
var imgBox = new Facebox({
ajaxDelay: 100,
draggable: false,
title: 'Terms and conditions',
url: theurl,
submitValue: 'Delete',
submitFunction: function() {
imgBox.fade();
var confirm = new Facebox({
width: 200,
title: 'Confirm',
message: 'Are you sure you want to delete?',
submitValue: 'Yes',
cancelValue: 'No',
submitFunction: function() {
confirm.close();
imgBox.close();
},
cancelFunction: function() {
confirm.fastclose();
imgBox.unfade();
}
});
confirm.show();
}
});
imgBox.show();
}
You need to update the window location to reload the page at the given URL. So your inner submitFunction should look something like this, you don't need to worry about closing the Facebox because the page will redirect anyway.
submitFunction: function() {
window.location = 'http://www.pagetosendto.com'
}

Load iframe with Fx.Slide effect

Could anyone tell my what am I doing wrong? The problem is that i have links that opens in iframe, and I want this iframe to be opened with Slide effect after I click the links (and after content will load to iframe). This is my code:
JS:
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('slider').hide();
$$('.cal_titlelink').addEvent('click', function(e) {
e = new Event(e);
mySlide.slideIn();
e.stop();
});
});
HTML:
<a class="cal_titlelink" target="details" href="//address is created dynamically by php//">Link 1</a>
<a class="cal_titlelink" target="details" href="//address is created dynamically by php//">Link 2</a>
....
<div id="slider"><iframe name="details"></iframe></div>
Here you can see how it works http://wisko.pl/ It's a calendar on the left. Slide effect works but iframe is empty. When i remove slider then iframe loads but with no effect. How can i make to load iframe content with slide effect? Please help.
http://jsfiddle.net/ZJzjV/114/
var mySlide = new Fx.Slide('slider').hide(),
myFrame = $('myFrame');
$$('.cal_titlelink').addEvent('click', function(e) {
myFrame.innerHTML = '';
e = new Event(e);
mySlide.hide();
e.stop();
if (!myFrame.getProperty("src")) {
myFrame.addEvent("load", function() {
mySlide.slideIn();
console.log("loaded");
});
}
myFrame.setProperty('src',this.getProperty('href'));
});
this is updated to work by adding a load event once and will slide it in once the iframe is loaded.