I'm trying to initiate a Semantic UI Dimmer with markup like so:
<p id="move">Move me</p>
<div class="ui dimmable">
<h3 class="ui header">
Overlayable Section
</h3>
<div class="ui dimmer"></div>
</div>
and js like so:
$('.ui.dimmable')
.dimmer(
{on: 'click'},
'add content', $('#move'))
;
There is apparently a behaviour called 'add content' that should detach an element from the DOM and add it into the dimmer.
Does anyone have ideas on how to make this work?
Note - the above does intitiate the dimmer on click of '.ui.dimmable', I just can't grasp how to use the 'behaviours' Semantic UI Docs mention, and can't find any examples.
Thanks!
The dimmer content is black by default, so you need to make your #move element white. I tried change it to h2 with .ui.inverted.header
Then you need to add your desired content to your dimmer with this:
$(".ui.dimmable").dimmer("add content", $("#move"));
And configure it to show on click
$(".ui.dimmable").dimmer({
on: "click"
});
Try it on this JSFiddle
Related
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
I want to show and hide a div, but I want it to be hidden by default and to be able to show and hide it on click. Here is the code that I have made :
<a class="button" onclick="$('#target').toggle();">
<i class="fa fa-level-down"></i>
</a>
<div id="target">
Hello world...
</div>
Here I propose a way to do this exclusively using the Bootstrap framework built-in functionality.
You need to make sure the target div has an ID.
Bootstrap has a class "collapse", this will hide your block by
default. If you want your div to be collapsible AND be shown by
default you need to add "in" class to the collapse. Otherwise the
toggle behavior will not work properly.
Then, on your hyperlink (also works for buttons), add an href
attribute that points to your target div.
Finally, add the attribute data-toggle="collapse" to instruct
Bootstrap to add an appropriate toggle script to this tag.
Here is a code sample than can be copy-pasted directly on a page that already includes Bootstrap framework (up to version 3.4.1):
Toggle Foo
<button href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</button>
<div id="Foo" class="collapse">
This div (Foo) is hidden by default
</div>
<div id="Bar" class="collapse in">
This div (Bar) is shown by default and can toggle
</div>
Just add water style="display:none"; to the <div>
Fiddles I say: http://jsfiddle.net/krY56/13/
jQuery:
function toggler(divId) {
$("#" + divId).toggle();
}
Preferred to have a CSS Class .hidden
.hidden {
display:none;
}
Try this one:
<button class="button" onclick="$('#target').toggle();">
Show/Hide
</button>
<div id="target" style="display: none">
Hide show.....
</div>
I realize this question is a bit dated and since it shows up on Google search for similar issue I thought I will expand a little bit more on top of #CowWarrior's answer. I was looking for somewhat similar solution, and after scouring through countless SO question/answers and Bootstrap documentations the solution was pretty simple. Again, this would be using inbuilt Bootstrap collapse class to show/hide divs and Bootstrap's "Collapse Event".
What I realized is that it is easy to do it using a Bootstrap Accordion, but most of the time even though the functionality required is "somewhat" similar to an Accordion, it's different in a way that one would want to show hide <div> based on, lets say, menu buttons on a navbar. Below is a simple solution to this. The anchor tags (<a>) could be navbar items and based on a collapse event the corresponding div will replace the existing div. It looks slightly sloppy in CodeSnippet, but it is pretty close to achieving the functionality-
All that the JavaScript does is makes all the other <div> hide using
$(".main-container.collapse").not($(this)).collapse('hide');
when the loaded <div> is displayed by checking the Collapse event shown.bs.collapse. Here's the Bootstrap documentation on Collapse Event.
Note: main-container is just a custom class.
Here it goes-
$(".main-container.collapse").on('shown.bs.collapse', function () {
//when a collapsed div is shown hide all other collapsible divs that are visible
$(".main-container.collapse").not($(this)).collapse('hide');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
Toggle Foo
Toggle Bar
<div id="Bar" class="main-container collapse in">
This div (#Bar) is shown by default and can toggle
</div>
<div id="Foo" class="main-container collapse">
This div (#Foo) is hidden by default
</div>
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.
I have a series of boxes/blocks of content on a form that need to just show the title of the box, with a 'View More' button below it. When a user clicks View More, the box should expand vertically to show its contents. Also, when another 'View More' is clicked, any other open boxes need to close.
How can I accomplish this with jQuery? I thought maybe I could use the Accordion plugin, but that sounds like it only works with list displays.
Example:
Box TitleView More!
*user clicks
Box Title
Content
Content
Content
Content
Close
The jQuery UI Accordion plugin doesn't rely on lists, you can use markup like this:
<div id="accordion">
<h3>First header</h3>
<div>First content</div>
<h3>Second header</h3>
<div>Second content</div>
</div>
http://jqueryui.com/demos/accordion/ Look at the theming tab, it doesn't use lists.
I am trying to have tooltip for my personal website http://www.stacked.in. when I move the mouse on the link, I want to have tooltip displayed. Tooltip display content is already available inside the html page as a div element, but it is hidden. I want the tool-tip to be displayed only when I move the mouse over the link. I use jquery and jquery plug-in
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ for this purpose. Even if I get the some other jquery-plugin, I would be happy.
Please note that tooltip-content div inner html would not shown. Tooltip supposed to get the element and display it.
#tooltip-content {
display:none;
width:250px;
}
here is HTML code..
<div id="widget" class="span-8 " >
<h2>Example.com</h2>
<ul>
<li><h3>Example News 1</h3>
<div id="tooltip-content">
<div class="published">Thu Jul 8, 2010</div>
<div class="content">
This detail news 1 shown only on tooltip..
</div>
</div>
</li>
<li><h3>Example News 2</h3>
<div id="tooltip-content">
<div class="published">Thu Jul 8, 2010</div>
<div class="content">
This detail news 2 shown only on tooltip..
</div>
</div>
</li>
</ul>
There would be more than 100 elements requires tooltip. Any better tool or way to handle this problem? If you give me the code sample, I would be greatful to you.. I already searched so many ways of doing it. http://code.google.com/p/jquery-very-simple-tooltip/ comes near to solution but it requires initialization for all the tooltip notes.
I've found jQuery Tools from http://flowplayer.org/tools/tooltip/index.html to have an excellent tooltip. You can use either a title attribute on the element, or use the next DOM node as the tooltip for a non-titled element.
Very flexible, and I'm sure it'll suit your needs appropriately. Good luck!