I want this arrow to spin when the page loads and then when someone clicks on it, it pause the animation. How can I do that?
<i class="far fa-arrow-alt-circle-up fa-7x fa-spin"></I>
Welcome to SO Morgan.
To achieve this you will want to use the following JavaScript to stop the icon spinning:
function stopSpinning() {
var element = document.getElementById("arrowIcon");
element.classList.remove("fa-spin");
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i id="arrowIcon" class="fa fa-car fa-spin" onclick="stopSpinning()"></i>
Note that I have used fa and fa-car in my example because this is a FontAwesome icon that will run in the code snippet.
Or you can do it inline without creating any functions:
<i id="arrowIcon" class="fa fa-car fa-spin" onclick="this.classList.remove('fa-spin')"></i>
Related
i am trying to click on the icon trash
<div class="form-body">
<div class="infos">
<div class="recap">
<div class="form-actions ">
<a class="btn btn-light btn-icon btn-icon-light" title="download" href=""
target="_blank" rel="noreferrer noopener" download="my_file">
<i class="icon-download"></i>
</a>
<button type="button" class="btn btn-light btn-icon btn-icon-light" title="delete">
<i class="icon-trash">
i have tried
cy.get('i.icon-trash').click()
cy.get(.form-actions .icon-trash').click()
Whatever i am trying i am getting the error:
The element <i.icon-trash> is not visible because its ancestor has position: fixed CSS property and it is overflowed by other elements. How about scrolling to the element with cy.scrollIntoView()?
Fix this problem, or use {force: true} to disable error checking.
scrollIntoView() also is not working.
Does anyone know why this error is happening please?
Thank you
screenshot of the html part above
The button parent of the icon has the click handler, try clicking that
cy.get('i.icon-trash')
.parent()
.scrollIntoView()
.should('be.visible') // for good measure, may not require
.click()
but I suspect the problem still persists.
Also try realClick()
cy.get('i.icon-trash')
.parent()
.scrollIntoView()
.should('be.visible')
.realClick({ position: "topLeft" }) // try various click positions
You can also try setting a larger viewport at the top of the test.
Other than that try working the CSS - but this is a bit of a hack.
Arguably it's ok because you are testing the click logic not the visibility of the icon (also true for .click({force:true})).
Identify the element with position: fixed for example if it's div.form-actions
cy.get('div.form-actions')
.then($formActions => {
$formActions.css({ position: 'relative' })
})
I'm using the mmenu plugin on a page that's based on jquery-mobile. Mmenu gives me left and right sliders which work fine except for when I try to open a 'mobile-style' popup window. These messages / events aren't getting out.
I have other popup windows on this page so I know that the popup code works but when I try to use the same code inside the <li><a href="#popup" ... ></a></li> framework for mmenu it does nothing.
Chrome script debugger doesn't show any errors. The styles and markup are the same between the working and non-working buttons (when viewed in the debugger).
popup window
<div data-role="popup" id="optionsDialog" data-overlay-theme="a" data-theme="b"
data-dismissible="false" style="max-width:400px;" >
<div data-role="header" data-theme="a">
<h1>Options</h1>
</div>
<div role="main" class="ui-content">
Some options go here?<br>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline
ui-btn-b" data-rel="back">
Cancel
</a>
</div>
</div>
button to open popup
<a href="#optionsDialog" id="options_button" data-role="button"
data-mini="true" data-rel="popup" data-position-to="window"
data-transition="pop">
Show popup
</a>
How do I go about finding my missing events?
FWIW: No idea what mmenu is doing to stifle this event but it was solved by scripting as follows:
$( "#options_button" ).click( function()
{
$( "#optionsDialog" ).popup( "open", {} );
});
...
<li><a href="#" id="options_button" >Options</a></li>
plain old jQuery.
my website uses Ajax and i want to close the Bootstrap's collapsed menu every time a user click click on every menu item, like this code. But this code doesn't work!! Damn!
$('.menu-item').click(function() {
$('.collapse').collapse('hide');
});
How can I fix it?
(The code of menu is a simply bootstrap 3.0.0):
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
And the code of menu:
<div class="col-md-6 downmy">
<div class="navbar-collapse in" style="height: auto;">
<div class="menuTop"><ul id="menu-primary" class="nav nav-pills"><li id="menu-item-605" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-605">Home</li>
<li id="menu-item-314" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-314">My Posts</li>
<li id="menu-item-315" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-315">Guestbook</li>
</ul>
</div>
</div>
</div>
When an element with class '.collapse' collapse or become visible the '.collapse' class will be replace by the .in class. So you will have to apply your hide on the .in class too.
$('.menu-item').click(function() {
$('.in').collapse('hide');
});
Your menu items contain an anchor, when click this a new page will open... so i don't understand your question. To prevent this add an event.preventDefault (http://api.jquery.com/event.preventDefault/) to your code:
$('.menu-item').click(function(event) {
event.preventDefault();
$('.in').collapse('hide');
});
The following query worked fine for me :
//The ":not('.dropdown-toggle')" is for the drop down menu (like a language menu) because
// I didn't want my navigation to close when clicking sub menu
$(".nav li a:not('.dropdown-toggle')").on('click',function(){
$('.navbar-collapse.in').collapse('hide');
});
You can add it to your page or in the $(document).ready(function(){/*...*/}); method
SUMMARY:
I need to insert a "Back to Top" links after every <div class="wrapSection">. I've been successful using the following:
<script>
$('.wrapSection').after('
<div class="backToTop clearfix">
Back To Top
</div>
');
</script>
However, I want to use a smooth scroll when clicking 'Back to Top.' With that in mind, I tried the following:
<script>
$('.wrapSection').after('
<div class="backToTop clearfix">
<a href="javascript:void(0)" onclick="goToByScroll('top')" class="up">
Back To Top
</a>
</div>
');
</script>
That does not work. Being a jQuery rookie, I did what seemed logical, which seems to never be the correct answer.
IN A NUTSHELL
More or less, I need this to appear, dynamically, after every <div class="wrapSection">:
<div class="backToTop">
<a class="top" href="javascript:void(0)" onclick="goToByScroll('top')">
Back to Top
</a>
</div>
This is the solution I came up with:
$(document).ready(function() {
// Markup to add each time - just give the element a class to attach an event to
var top_html = '<div class="backToTop">Back To Top</div>';
$(".wrapSection").after(top_html);
// Use event delegation (see http://api.jquery.com/on/)
$("body").on("click", ".top", function(e) {
e.preventDefault();
$("html,body").animate({ scrollTop: 0 }, "slow");
});
});
You can try a jsFiddle here: http://jsfiddle.net/F9pDw/
I have an image gallery on my site that uses thumbnails that enlarge above the thumbnail line when clicked on. I'm having an issue with the auto-refresh; every time I click one of the thumbnails, the page refreshes, which restores it to the "master image".
I'm not (and sort of refuse, on the grounds that I believe all this can be done with simple CSS and HTML) using anything fancy to write this code, despite my knowledge of HTML being amateur at best.
Here's a sample of the code. Let me know if you need to see a different piece of it.
<div id="rightcol">
<img name="ImageOnly. src='#' /><img src="#" />
</div>
<div id="leftcol"> <div>
<a href="" onclick="ImageOnly.src='#'"><img src="#" />
</div>
Edit: Somehow I seem to have fixed this issue by changing
<a href="" onclick="ImageOnly.src='#'">
to
<a href="#" onclick="ImageOnly.src='#'">
Not really sure why this worked but would love an explanation...?
Why not just use some simple ajax/javascript .innerHTML? instead of trying to stop the auto refresh that occurs when you click on a hyperlink that has #. That way you could update the rightcol synchroniously.
HTML
<div id="rightcol">
<img name="ImageOnly.src" src='#' />
</div>
<div id="leftcol">
<img src="#" />
</div>
AJAX Script
function ajaxMove(src)
{
var image = '<img src="'+src+'" alt="my transferred image" />';
document.getElementById('rightcol').innerHTML = image;
}
How is it used?
Request the object from the onclick event.
Build an image tag based off the information in the object.
Transfer the new image tag to the element with the id 'rightcol'
Other options
You could also remove the href="#" from the <a> tag and work directly from the onclick event and then apply style="cursor:pointer;". Then it will work like a regular hyperlink but without the refresh.
<a onclick="javascript:ajaxMove('ImageOnly.src')" style="cursor:pointer;" >Click Me</a>