We Keep Coding

How can I hover over an element then click

I want to hover over the "My Account" button and the click the "Login" button opened popup. I have tried the below code but it did not work. Does anyone know a way to handle this situation?
Cypress.Commands.add('loginol', (email, password) => {
cy.get('#myAccount').click()
cy.get('#myAccount').trigger('mouseover')
cy.wait(3000)
cy.get('#login').click()
cy.get('#email').type(email)
cy.get('#password').type(password)
cy.get('.btn.full.btn-login-submit').click()
})
I have uploaded the pictures in case it helps:
"Giriş Yap (My Account)" Button
After it is hovered below "Giriş Yap (Login)" Button
Website I'm working on: https://www.hepsiburada.com/

//cypress doesn't know how to hover so 'invoke' call JQuery 'show' method which force menu to become visible
cy.get('#myAccount').invoke('show');
that worked for me.

You don't have unique id's, assign unique id's to your elements
From the source code of your website:
So what happens is you are triggering the mouseover on the widget, the first myAccount item, the widget container. On this item you don't have any events bound, they are bound on the second item tagged with id="myAccount"
ID needs to be unique
To resolve make the id of your button something like id="myAccount_button" and target that in your test script.
Below is a snippet that simulates your website. It doesn't show the menu.
$('#myAccount').trigger('onmouseover');
#menu {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myAccount">
<div id="myAccount" onmouseover="$('#menu').show()" onmouseout="$('#menu').hide()">
my account
</div>
</div>
<div id="menu">
a<BR/>
c<BR/>
d<BR/>
e<BR/>
</div>
This is the snippet with the fix. As you can see, the menu shows here, because the ID is unique and can be targeted.
$('#myAccount_button').trigger('onmouseover');
#menu {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myAccount_wrap">
<div id="myAccount_button" onmouseover="$('#menu').show()" onmouseout="$('#menu').hide()">
my account
</div>
</div>
<div id="menu">
a<BR/>
c<BR/>
d<BR/>
e<BR/>
</div>

For a workaround and from the official cypress website they're mentioning cypress-real-events plugin which can be helpful for a real events that require event.isTrusted to be true, it provide hover and more real events, so you can use it as a real user and test your elements such as a tool-tip messages, expendable lists,... etc.
Note: for current time it support only chromium's based web browsers

How to remove AddThis fragment identifiers (hash) from Facebook button? (Twitter's worked)

I'm trying to use Twitter and Facebook AddThis buttons in my Web app, and don't like to use those redundant fragment identifiers. However, for some reasons when I disable its tracking functionality in my app, it works only on Twitter button and not on Facebook button. I don't see any differences between the two buttons code...
Anyway, here's my code snippet:
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_2 btn-addthis" addthis:url="path/to/my/url"></a>
<a class="addthis_button_preferred_1 btn-addthis" addthis:url="path/to/my/url/same/with/the/above"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
<script type="text/javascript">
var addthis_config = addthis_config||{};
addthis_config.data_track_addressbar = false;
addthis_config.data_track_clickback = false;
</script>
I implemented the second <script> in order to disable the fragment identifiers. However, when I tapped the Twitter button, the hash was successfully removed completely and just the url was there. However, the Facebook button didn't work, and the hash remained to be there for some reasons.
Why does this occur? I tried to move the second <script> tag before the first <script> but it didn't change at all (by the way which <script> should I write the first?)
And also, the reason I swapped the button with .addthis_button_preferred_1 with the one with .addthis_button_preferred_2 is that I want to display the twitter button before the Facebook button, but for some reasons, it's not swapped properly at times (about 15 ~ 20 % of the time) and the Facebook button is displayed first for some reasons... Maybe the whole AddThis functionality doesn't work...?

You should not use preferred if you want facebook and twitter only. Because if you use preferred it will set the share buttons to that users preferred social community. addthis_button_facebook for facebook and addthis_button_twitter for twitter.
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook" addthis:url="path/to/my/url"></a>
<a class="addthis_button_twitter" addthis:url="path/to/my/url/same/with/the/above"></a>
</div>
I don't think you need the script, but if you do try instead to remove the class addthis_toolbox.

JQuery slidetoggle

I am currently building a website for an indie game development team I am working with.
Right now I am writing the alpha sign up page and I have created layout which needs to make use of the slideToggle() and fadeToggle() methods, however after a few hours of faffing around in my editor I cannot seem to fathom a solution for the behavior I want.
When the page loads I want the form container to be in its slid up position and when the user clicks on the div I want the form container to animate down.
I have tried to animate the display property from hidden to block and I have also tried to hide the element when the document loads and then re-show it on click, however when I did that I noticed a strange behavior as the div would slide down and then up, which would cause the user to have to press the button again to view the sign-up form.
The code below handles the click event,
<a href="#" >
<div onclick="$('#showForm .inner').fadeToggle({queue:false});$('#showForm').slideToggle();" id="alpha-container" class="alpha-off"></div>
</a>
And this is the div I want to be hidden and re-appear
<div id="formContainer" class="form container">
<div id="showForm" class="outer">
<div class="inner">
<form method="post" action="verify.php">
<table>
<tr>
<td class="intro">
<h1 class="header-orange">Liberico Alpha Application</h1>
<p class="body-text">So you think you have what it takes to brave the battlefield?
</p>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
I have created a jsfiddle demonstrating how my page currently renders - http://jsfiddle.net/alexmk92/54EUC/ - any pointers would be greatly appreciated.

Firstly, i removed the javascript code from html and added a class "clickable" to the clickable element:
<a class="clickable" href="#" >
<div id="alpha-container" class="alpha-off">CLICK ME FOR ANIMATION</div>
</a>
And then, i've created a custom javascript toggle function with slideDown and up:
$('.clickable').click(function(){
var showFormObj = $('#showForm');
if(showFormObj.hasClass('active')){
showFormObj.removeClass('active');
showFormObj.slideUp();
}else{
showFormObj.addClass('active');
showFormObj.slideDown();
}
});
On the css part i hid the 'showForm' element:
#showForm {display:none;}
Here is the fiddle: http://jsfiddle.net/Karzin/54EUC/2/

If you need to hide the form when page loads. For form container use
display : none
Eg:
http://jsfiddle.net/54EUC/1/

Hiding/Showing extra content using Javascript

I havent used Javascript in a while and I have almost forgotten it all but I would like to be reminded how to show and hide html div boxs to display hidden content by clicking on a text or such.
In this case I would like to have a hidden box filled with login information while the ahref link will be the indicator to tell the loginbox to appear or disappear and by knowing this I could easily apply it to the register area.
I would like to know how to do this or a pop up box sort of thing.
This is what I have so far:
Could anyone help me with this now. I can't seem to get it work.
The toggle is
Login
Showing content
<div class="signup" style="display: none;">
<p> test </p>
</div>
Javascript is
function showStuff(signup) {
document.getElementById('signup').style.display = 'block';
}
Why won't this work

Looks like the issue with your code is that your div has a class as 'signup' not an id.
try:
<div id="signup" style="display: none;">
<p> test </p>
</div>
See this jsfiddle for a working example with an additional fix to how your function works.
http://jsfiddle.net/aUQ6B/
Original Answer:
See: javascript hide/show element
Code to make note of is the following:
document.getElementById('myid').style.display
Setting this to 'none' hides the element.
Setting it to 'block, 'inline' or whatever the original value was will show the element.

Jquery pop-up using fancybox

I've a button clicking on which it shows a pop-up message. Code is given below:
<a id="report_button_id" href="#report_form_container" class="form_show_link" style="text-decoration: none; cursor: hand">
<span id="report_button_text_id" class="top_nav_report_button">My Link Here</span>
</a>
<div style="display:none;">
<div id="report_form_container" class="popup_container">
// Some page is displayed here using div tags
</div>
</div>
In Javascript file:
$("a.form_show_link").fancybox({
centerOnScroll:true,
overlayOpacity:0.7,
overlayColor:'#000000',
showCloseButton:false,
hideOnOverlayClick:false,
onStart:resetPopupFormErrors
});
$("#report_form").keypress(function(e) {
if(e.which == 13){
$("#report_form").submit();
}
});
Can any one explain how the above code is displaying pop-up windows on clicking button especially when the style is none????
Thanks!

If I understand your question ('how does this work?'), it is prett simple... Fancybox is moving the target div out of its old container and into a temporary one that it controls. As such, its parent containers no longer have influence on the target (such as 'display:none').