I'm trying to move the location of the cursor (mouse pointer) when an element is brought into view.
Let's say I have a button at the top of screen that, on click, opens a somewhere else on the screen. They are not connected in the doc flow (the is position: fixed>
When I show the new item, I want the mouse cursor to move to the newly displayed element, e.g. to the close button inside of it. I added a call to focus() but not working...
function myClick(idName) {
let listOfBios = document.getElementsByClassName("contents");
const len = listOfBios.length;
let elemName = "Content_" + idName;
let elem = document.getElementById(elemName);
elem.focus();
for(let i = 0; i < len; i++) {
let theBio = listOfBios[i];
if(theBio != elem){
//alert(elemName);
theBio.classList.remove("show_contents")
}
}
elem.classList.toggle("show_contents", 1);
elem.focus();
}
Assume that the rest of the code works, so I definitely have the right element ad toggle() is working.
You will need JS to achieve this. See below for example with vanilla JS.
in your view:
<input type="text" id="myTextField" value="Text field.">
in JS:
document.getElementById("myTextField").focus();
Check this fiddle:
https://jsfiddle.net/jz7v53tL/
Looks like it can't be done with just CSS and JS. Trying to close this out, I hope this is how.
Related
im trying to make the content inside of an event in the Fullcalendar sticky. When you scroll in the calendar the content of the events should be visible as long as the event isn't out of the view.
I tried it with simple css but that doesn't work, see for yourself:
.fc-event .fc-content {
position:sticky;
top:0;
}
https://codepen.io/snak3/pen/KZKNMd
Has anyone an idea how to get this working or isn't it that easy?
It's not possible to use position:sticky out of the box, but here's an example of how you might go about it with js (add this to the end of your script):
const content = document.querySelectorAll('.fc-event .fc-content')[1];
const scroller = document.querySelector('.fc-scroller');
scroller.addEventListener("scroll", function() {
if (scroller.scrollTop > 100) {
content.style.position = "fixed";
content.style.top = "130px";
}
else {
content.style.position = "unset";
}
});
Obviously the selector and top values are very specific. You can use js to calculate the appropriate top distance for each event, and apply it for each scroll proc. That is a lot of work though.
Hello i'm working on a project that requires canvas manipulation. I need to draw an image and have to move it within the canvas. Which was not so hard to accomplish.. However i need to change my cursor into "move" when hovering the image like
img{
cursor:move;
}
I couldn't find any way to do this. Any suggestion??
Thanks in advance..
When you drag an Kinetic.Image, you get dragstart and dragend events.
You can change the cursor type in those event handlers:
// starting to drag -- display the move cursor
image1.on('dragstart', function () {
document.body.style.cursor = 'move';
});
// done dragging -- display the regular cursor
image1.on('dragend', function () {
document.body.style.cursor = 'default';
});
Basically you need an element which you can style on the page but with display: none, then put that element onto the canvas like this:
var image = document.getElementById('image');
context.drawImage(image, 0, 0);
I have managed to use the position:fixed setting of CSS/CSS3 before and worked quite well!
I saw this a few days ago and was wondering how did they achieve the effect that happens when you scroll down, where the menu bar is in one position before you scroll and then goes to the top where it locks itself down.
See link - http://www.cssportal.com/ < scroll down on any page and observe the top blue menu.
I have tried to look in the source of the page but I cant make head or tails.
Does anyone know what this effect is called?
It's done with javascript, to add a css class that contains position:fixed and other positioning styles to achieve what you want.
It's not complicated. Here is a jquery plugin: http://stickyjs.com/
This is how I did it a few years ago:
var menu_bar = $("#menu");
var top = menu_bar.offset().top;
var detached = false;
$(window).scroll(function (e) {
if ($(this).scrollTop() >= top) {
if (!detached) {
detached = true;
menu_bar.addClass('fixed');
}
} else {
if (detached) {
detached = false;
menu_bar.removeClass('fixed');
}
}
});
See the following post for a picture highlighting my question and a potential solution:
CSS overflow-y:visible, overflow-x:scroll
However, this strategy breaks when you actually move the scrollbar. In the suggested implementation (position: fixed;), the tooltips display next to child div in its position pre-scroll. So, as you scroll new child-divs into view, the tooltips begin falling off the bottom of the page.
See here for a demo of the bug: http://jsfiddle.net/narcV/4/
Any ideas how I can make the tooltips display next to the child div at all times?
I ended up implementing this using javascript, using the getPos function from this question.
The end product looks like:
var scrollPanel = ...;
var tooltip = ...;
function nodeHovered(e) {
var hovered = e.srcElement;
var pos = getPos(hovered);
pos.x += hovered.offsetWidth;
pos.y -= scrollPanel.scrollTop;
tooltip.style.setProperty('left', pos.x);
tooltip.style.setProperty('top', pos.y);
}
Basically, I calculate where on the page the node is currently displayed (taking into account the scrollbar position), and manually place the tooltip in the right spot on the page.
Too bad there's no elegant/CSS way to do this, but at least this works.
I'm new to jQuery and i must admit that i've understood nothing yet, the syntax appears to me as an unknown language although i thought that i had my experiences with javascript.
Nevertheless i managed it to implement this menu in my asp.net masterpage's header.
Even got it to work that the content-page is loaded with ajax with help from here.
But finally i'm failing with the menu to disappear when the new page was loaded asynchronously. I dont know how to hide this accursed jQuery Menu.
Following the part of the js-file where the events are registered for hiding/disappearing. I dont know how to get the part that is responsible for it and even i dont know how to implement that part in my Anchor-onclick function where i dont have a reference to the jQuery Object.
buildmenu:function($, setting){
var smoothmenu=ddsmoothmenu
var $mainmenu=$("#"+setting.mainmenuid+">ul") //reference main menu UL
$mainmenu.parent().get(0).className=setting.classname || "ddsmoothmenu"
var $headers=$mainmenu.find("ul").parent()
$headers.hover(
function(e){
$(this).children('a:eq(0)').addClass('selected')
},
function(e){
$(this).children('a:eq(0)').removeClass('selected')
}
)
$headers.each(function(i){ //loop through each LI header
var $curobj=$(this).css({zIndex: 100-i}) //reference current LI header
var $subul=$(this).find('ul:eq(0)').css({display:'block'})
$subul.data('timers', {})
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false //is top level header?
$subul.css({top:this.istopheader && setting.orientation!='v'? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images
'<img src="'+ (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1])
+'" class="' + (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0])
+ '" style="border:0;" />'
)
if (smoothmenu.shadow.enable){
this._shadowoffset={x:(this.istopheader?$subul.offset().left+smoothmenu.shadow.offsetx : this._dimensions.w), y:(this.istopheader? $subul.offset().top+smoothmenu.shadow.offsety : $curobj.position().top)} //store this shadow's offsets
if (this.istopheader)
$parentshadow=$(document.body)
else{
var $parentLi=$curobj.parents("li:eq(0)")
$parentshadow=$parentLi.get(0).$shadow
}
this.$shadow=$('<div class="ddshadow'+(this.istopheader? ' toplevelshadow' : '')+'"></div>').prependTo($parentshadow).css({left:this._shadowoffset.x+'px', top:this._shadowoffset.y+'px'}) //insert shadow DIV and set it to parent node for the next shadow div
}
$curobj.hover(
function(e){
var $targetul=$subul //reference UL to reveal
var header=$curobj.get(0) //reference header LI as DOM object
clearTimeout($targetul.data('timers').hidetimer)
$targetul.data('timers').showtimer=setTimeout(function(){
header._offsets={left:$curobj.offset().left, top:$curobj.offset().top}
var menuleft=header.istopheader && setting.orientation!='v'? 0 : header._dimensions.w
menuleft=(header._offsets.left+menuleft+header._dimensions.subulw>$(window).width())? (header.istopheader && setting.orientation!='v'? -header._dimensions.subulw+header._dimensions.w : -header._dimensions.w) : menuleft //calculate this sub menu's offsets from its parent
if ($targetul.queue().length<=1){ //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:header._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'}, ddsmoothmenu.transition.overtime)
if (smoothmenu.shadow.enable){
var shadowleft=header.istopheader? $targetul.offset().left+ddsmoothmenu.shadow.offsetx : menuleft
var shadowtop=header.istopheader?$targetul.offset().top+smoothmenu.shadow.offsety : header._shadowoffset.y
if (!header.istopheader && ddsmoothmenu.detectwebkit){ //in WebKit browsers, restore shadow's opacity to full
header.$shadow.css({opacity:1})
}
header.$shadow.css({overflow:'', width:header._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:header._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime)
}
}
}, ddsmoothmenu.showhidedelay.showdelay)
},
function(e){
var $targetul=$subul
var header=$curobj.get(0)
clearTimeout($targetul.data('timers').showtimer)
$targetul.data('timers').hidetimer=setTimeout(function(){
$targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime)
if (smoothmenu.shadow.enable){
if (ddsmoothmenu.detectwebkit){ //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them
header.$shadow.children('div:eq(0)').css({opacity:0})
}
header.$shadow.css({overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime)
}
}, ddsmoothmenu.showhidedelay.hidedelay)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}
one link of my menu what i want to hide when the content is redirected to another page(i need "closeMenu-function"):
<li>Delivery Control</li>
In short: I want to fade out the submenus the same way they do automatically onblur, so that only the headermenu stays visible but i dont know how.
Thanks, Tim
EDIT: thanks to Starx' private-lesson in jQuery for beginners i solved it:
I forgot the # in $("#smoothmenu1"). After that it was not difficult to find and call the hover-function from the menu's headers to let them fade out smoothly:
$("#smoothmenu1").find("ul").hover();
Regards,
Tim
Ok, I didn't read your whole post. But if you are using a jQuery Menu, that menu should having a container element like <div> or <ul> and they will either have a class or id
In case it is a id then do
$(document).ready(function() {
$("#myelementid").hide();
});
In case it has a class then do
$(document).ready(function() {
$(".myelementclass").hide();
});
Hope this helps
UPDATE
$("#mainmenu").children().hide(); // to hide all child elements
or
$(".submenu").hide(); //to hide every submenu