I am using this sliding top panel using mootools (for orientation, the code is basically the same).
I want it to appear when the page is loaded, means, index.html is loaded.
I achieved this simply by adding the corresponding JavaScript to index.html:
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
(Of course this is also the top-panel itself)
When you click a link in this top panel, a new page will be loaded into a specified div, and then, the top panel should be hidden.
I think you can do this by adding
var mySlide = new Fx.Slide('top-panel').hide();
or
mySlide.hide();
in some JavaScript. I think it should execute, when the ahah.js-javascript is done loading the content into the div, I tried adding both the JavaScript quoted above and the two variations of mySlide.hide() in ahah.js. (into ahahDone(), after the last getElementById).
Using this setup, I get the following rendering. (This is after clicking the corresponding link which loads content from an html-file into a div and clicking on the "More (mehr)" link on top of the page which should slide down the top panel.) But only the button which is visible always (sub-panel) slides down and is visible, the actual panel content does not show up.
Any ideas? It would be great, if you could leave an answer with a short explanation.
This looks like a scoping problem. You declare mySlide inside an anonymous function, and its scope will be limited to that function. Later, when $('toggle') is clicked, the event that is fired is outside the scope of that function so it does not have access to mySlide.
A quick fix (if you don't mind using globals) could be declaring var mySlide=null in the main javascript so that you have a closure, and then change your current var mySlide=new Fx.Slide(...) to just mySlide=new Fx.Slide(..)
(or it could be something else entirely...)
Related
I'm working on a Shopify project and am not the original developer, who is unavailable, along with an un-minified version of the javascript file included on every page.
The original site has a page displaying a grid of employee headshots. I have been tasked with enhancing by making it such that each headshot has an overlay that displays some additional info and that clicking on either the headshot image OR the overlay (and its contents) will take some additional action.
Each grid item (headshot) essentially looks like this:
<div class="wrap">
<img src="PATH_TO_IMG">
<div class="info">Danny Testeroni</div>
</div>
and my event listener/handler looks like this:
const $item = document.querySelector('.wrap');
$item.addEventListener('click', (e) => {
console.log(e.target);
});
All works as expected.
Clicking anywhere within the grid item, console.logs the image UNLESS you click anywhere on the overlay, in which case, it console.logs the overlay container. This is what I need.
However when I add this to the actual Shopify template (in which this global JavaScript file gets included), i get different results.
Clicking anywhere within the grid item, console.logs the image UNLESS you click anywhere on the overlay, in which case, it console.logs NOTHING.
The only thing I can conclude is that something in the global JavaScript file is canceling the click event at the <img> so it never makes it to the overlay. Is this the case? If so, is there any way to tell where this is happening and possibly overriding it with my new script? And if not, any ideas why clicks on the overlay may not be registering in the actual Shop as opposed to my bare bones prototype, which can be seen in this Codepen?
You can remove the arrow function on your addEventListener handle and use this, to reference the element it was attached to
const $item = document.querySelector('.wrap');
$item.addEventListener('click', function(e) {
console.log(this);
})
<div class="wrap">
<img src="https://cdn.shopify.com/s/files/1/0598/3089/4765/articles/barber-culture_x700.png?v=1646319227">
<div class="info">Danny Testeroni</div>
</div>
Point
The code I have here is from my "operating system" I'm trying to create inside a browser by putting iframes in AppWindows with PHP code as the backend or the (main program process).
Now in every GUI system you have the ability to move windows, stack one on top of each others and such, but I'm not able to do efficiently in HTML using jQuery & jQuery-UI.
I'm using draggable() and some tricks I've found on StackOverflow to be able to bring the div AppWindow on top.
The problem
The code for bringing the **AppWindow** on top works fine but the problem is the iframe inside that window gets reset, because what this code is doing is that it stacks the current div as the first div above all the others inside the parent container.
If you notice the AppWindow 1 iframe blinks when you click on that window, I don't want that.
Code (jQuery)
$(function() {
// Don't know what I'm doing with iframe here...
$('.AppWindow iframe').click(function(){
$(this).parent().child.parent().append(this);
});
$('.AppWindow').click(function(){
$(this).parent().append($(this));
});
$('.AppWindow').draggable({handle:".DragHandle"});
});
Conclusion
If there is a way of preventing this from happening feel free to write an answer below. If you have a better way such as "JavaScript OS UI Framework" or something like that you're even more free to write below.I want something like **os.js** or **windows93.net** type of thing. All I need is a working taskbar, working window and a way to easily embed a PHP page inside that window that will mimic the work of the application.
I don't think it's possible. Take a look at here.
But
why do you reorder windows by change their positions in the dom in the first place? You could simply work with z-index. A basic example where you just set an active class of the targeted frame.
$(function() {
$('.AppWindow').draggable({
handle:".DragHandle",
drag: function(event, ui){
updateActiveWindow(event.target);
}
});
$('.AppWindow').on('click', function(){
updateActiveWindow(this);
});
function updateActiveWindow(el) {
$('.AppWindow').removeClass('active');
$(el).addClass('active');
}
});
with following css changes
.AppWindow.ui-draggable-dragging,
.AppWindow.active {
z-index: 1;
}
Edit: optimized the js a bit so that the window turns active once you start dragging.
Really need some JQuery help here. I'm about to launch my laptop out the window. I have come a long way with this piece of code an I think I am almost there but I am stuck on the last hurdle.
I am only going to include the pertinent pieces of code here because it is a very large piece.
I have a navigation menu for a mock solar system. Here is the link to the larger external piece if you want to see the whole thing. http://jsbin.com/zagiko/1/edit (please note this uses mostly CSS3).
I have a nav menu for the piece and when you click on the values in the nav menu the current script assigns a class of active. That all works perfectly. I built in a button to test the active state on click and the state changes are working. But I need it to respond to the state change on hover. I am not a JQuery person; I am learning. It almost seems like the hover isn't working because it is responding to the data loaded when the page loads instead of responding in real time. But I am just guessing.
What I need is an if statement that will respond to the live data (not on page load or when the document is ready). The if statement should basically say if this div is active then this other div can appear on hover. But if this div is not active then it cannot appear.
The current if statement I wrote is
if($("a.active").is('.uranus')){
$('#uranus .infos').hover(
function () {
$("#descriptionsp").fadeIn("2000");
})
};
The current script that runs when the site loads that sets up the menus is:
$(window).load(function(){
var e=$("body"),
t=$("#universe"),
n=$("#solar-system"),
r=function() {
e.removeClass("view-2D opening").addClass("view-3D").delay(2e3).queue(function() {
$(this).removeClass("hide-UI").addClass("set-speed");
$(this).dequeue()})
},
i=function(e){
t.removeClass().addClass(e)
};
$("#toggle-data").click(function(t){
e.toggleClass("data-open data-close");
t.preventDefault()
});
$("#toggle-controls").click(function(t){
e.toggleClass("controls-open controls-close");
t.preventDefault()
});
$("#data a").click(function(e){
var t=$(this).attr("class");
n.removeClass().addClass(t);
$(this).parent().find("a").removeClass("active");
$(this).addClass("active");
e.preventDefault()
});
Really need you help. Thanks in advance!
Right now, your block of code is only being checked when the javascript is loaded. At this time, the .uranus element is probably not active, so nothing will happen.
First of all, you want to move this block inside of document ready, otherwise your elements such as .uranus might not even exist yet.
Your logic is very close, but you need to move the if statement inside of the hover function like this:
$('#uranus .infos').hover(
function () {
if($("a.active").is('.uranus')){
$("#descriptionsp").fadeIn("2000");
}
});
This way, every time you hover on #uranus .infos, it will only execute the code if the .uranus is also .active
I have a div in the middle of my web page that is placed in front of an iframe the with links along side of it. I would like to hide the div once any one of the links are clicked. How would I go about doing this using javascript? I am very new to this so please be as descriptive as possible so that I can understand.
Here is some of my html code. I have a number of links that appear in an iframe. I have the logo div positioned on top of the iframe and it loads when you enter the site. However I want to hide the logo when you click on anyone of the links.
<li>My Resume</li></br>
<li>My Course Work</li></br>
I used the jquery code noted by Dolours below along with extra coding within my the body of my html code, when you click on a link then the div disappears as I intended but then it reappears once you click on another link. I want it to disappear and stay away. Here is the additional code that I came up with
About Me
Does anyone know how I can make my logo stay away?
You can do this using jQuery:
// Get the iFrame jQuery Object
var $MyFrame = $("#iframeid");
// You need to wait for the iFrame content to load first
// So, that the click events work properly
$MyFrame.load(function () {
var frameBody = $MyFrame.contents().find('body');
// Find the link to be clicked
var link = frameBody.find('.link_class');
// Set the on click event for the link
link.on('click', function() {
// Hide the div inside the iFrame
$('#divID').hide();
});
});
You can use the code below
$('a').click(function() {
$('#divID').hide();
});
Assuming all links will load the iframe.
I asked How can I make the “Preview Post” button save and preview in the same window? on the Wordpress Stack Exchange, but this may be a better question for Stack Overflow as it is more directly related to coding.
Wordpress has a box that allows you to save, preview, and publish your blog posting:
The "Preview" button is actually a link styled as a button:
<a tabindex="4" id="post-preview" target="wp-preview"
href="/?p=67&preview=true" class="preview button">Preview</a>
My problem is that I can't seem to figure out how to get that link to open in the current window. Notice the target="wp-preview" part. I'm trying to get rid of that part, but I think there may be another function bound to that element because I really can't get it to open in current tab / window, even after unbinding it and removing the target attribute.
I'm running the following code as part of a plugin (you can see more info on how to run this as a plugin below), but it is also possible to copy and paste this into Chrome or Firefox's console to test this out yourself without even modifying Wordpress. Please note that when testing you'll need to use jQuery instead of $ in your own functions as Wordpress uses the noconflict method, however the code below is working fine as is.
//select the node and cache the selection into a variable
var $node = jQuery('a.preview');
//add a 1px dotted outline to show we have the right element
$node.css('outline','1px dotted red');
//show current target
console.log($node.prop('target'));
//show if anything is bound - nothing is for me ('undefined')
console.log($node.data('events'));
//remove anything bound to it
$node.unbind();
//set target to _self (current window), just in case
$node.prop('target','_self');
//the remove the target attribute all together
$node.removeAttr('target');
//clone the node
var $clone = $node.clone();
//change the text to new
$clone.text('new');
//remove target from clone
$clone.removeAttr('target');
//unbind the clone
$clone.unbind();
//insert the clone after the original node
$node.after($clone);
//show current target - now shows undefined for me
console.log($node.prop('target'));
//show if anything is bound - still 'undefined'
console.log($node.data('events'));
This is how you would work the code into a theme or plugin:
// set up an action to set a function to run in the wp admin_footer
add_action('admin_footer','my_admin_footer_script',9999);
Here is the function that adds the javascript:
//this function can then be used to add javascript code to the footer
function my_admin_footer_script(){ ?>
<script type="text/javascript">
jQuery(function($){
(above js code here)
});
</script>
<?php
}
This is the result I end up with. If I click the "test" link it will open in the same window. If I click the Preview link it still opens in a new tab.
ps: I'm using the method from Things you may not know about jQuery to check for bound events, and I didn't find anything bound, and I believe Wordpress primarily uses jQuery so I don't think this would be bound with another event handler.
You could try this:
jQuery('.preview.button').click(function(e){
window.location.href = this.href;
return false;
});
Works from the Chrome Inspector.
The syntax is right but the timing is important. If you just do the first part but not the second part it is possible that this will not work because it seems there is a delay with the event that binds to this element.
If you include the second part as well, that waits for 500ms after the page is loaded to run, it seems that it works as expected.
add_action('admin_footer','preview_same_window');
function preview_same_window(){ ?>
<script type="text/javascript">
jQuery(function($){
//first part
jQuery('.preview.button').unbind().removeAttr('target');
//second part
setTimeout(function(){
jQuery('.preview.button').unbind().removeAttr('target');
},500);
});
</script>
<?php
}