On my own site, when hovering over a list-item, it highlights black, instead of the darker gradiented background which appears when hovering on the JQueryMobile Docs website.
I found my code here under the "basic linked lists" right at the top. I have tried giving it other themes etc. but nothing seems to solve this simple issue.
Here is my piece of code:
<ul data-role="listview" data-theme="b">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
</ul>
The only thing I can think of is the container in which the list is held, or something, but it's not that...
Here's my setup:
Running Rails 3.2.6 with the latest JQuery and latest JQueryMobile.
What could possibly cause this, and how can I solve it?
This happened to me too. If you delete app/assets/stylesheets/scaffolds.css.scss, lists should no longer have a black background when hovering over them.
Related
I've got a rather weird scenario going on here. I am trying to add tooltips to an existing ASP.Net MVC application in which I'm upgrading Bootstrap to 4.6.2. The upgrade was very smooth with no complications; I just want to replace the default display of titles with the nicer looking tooltips, but for some reason they're not appearing. I tried to simplify things by creating a new view to isolate the problem, and still no tooltip. I tried again with completely new solution, and wouldn't you know it, it works! So my question isn't "how do I create tooltips", but "how can I debug what's going on in the failing project?"
Here's what I've discovered so far. I believe you can see everything that's relevant in this screenshot of the nearly-empty view. All the included script files are there in the right order, my script is there, initializing the tooltip, and there are no messages in the console. When I hover over the link, a new <div> element is added to the DOM. In DevTools, I use the arrows to expand the tree, showing everything in the tooltip. The .fade:not(.show) CSS selector is the reason I don't see it. In the working solution, the show class is properly added to the tooltip's <div>.
So, could there be some setting in the existing application preventing the addition of the show class? Is something failing in the tooltip code,causing it to never add the show class without reporting errors? How should I continue debugging this? I tried stepping through the bootstap.js file, but being a JS noob, I'm getting a little lost. The screenshot is from Chrome, but I see the same behavior in Firefox.
This turned out to be one of those embarrassing oversights. My BundleConfig.cs file was still pointing to old Javascript files that were still hanging around after the upgrade. I should have seen it in the version numbers in the <script> tags.
I've coded this website: https://feetup.com/
All works fine, except that in safari the fixed header at the top hides under the content when scrolling. This happens only the homepage. I tried everything I could find online to fix it, without success.
Any suggestions are welcome!
I tried two ways and it works for me, you can try and pick the most suitable way for your site:
Disable overflow: hidden on .hero-index, the header still remains when it is outside of the hero element.
Bring the <header> outside and put it above the <div class="... feetup-hero hero-index">
I have a Protractor/Jasmine E2E Automation test that is to drag and drop a couple of collapsible panels to change the order and just verify they the elements have been moved.
I'm currently running latest versions of Protractor, Jasmine, and webdrivers (tests run in IE 11)
EDIT: Found out we're using ng-dragula to perform the drag and drops. I'm assuming protractor just isn't playing nicely with this. I'll do more digging about it, but still curious to know if there's a work around.
/end edit
This function used to work, and I have since tried a handful of variations of it:
browser.actions().
mouseMove(dragFromElement).
mouseDown().
mouseMove(dropToElement).
mouseUp().
perform();
browser.actions().
dragAndDrop(dragFromElement, dropToElement).
perform();
I've also tried with .getWebElement() appended to the element tag, getting each elements location and doing a mouse click, move, drop to those locations, and trying various actionSequences instead of actions().
Basically all of the above will highlight the text of the elements like it's clicking behind the panels and does not actually grab the element and drag/drop it.
Curious to know if this is a known problem or if there's a possible solution for my issue.
What i'm working with is:
<core-drag-and-drop-panel _nghost-wod-4="">
<div class="sortable-panels" _ngcontent-wod-4="">
<div id="elementId_10" class="draggableDiv" _ngcontent-wod-4="" aria-dropeffect="move" aria-grabbed="false">
<div id="elementId_12" class="draggableDiv" _ngcontent-wod-4="" aria-dropeffect="move" aria-grabbed="false">
<div id="elementId_1" class="draggableDiv" _ngcontent-wod-4="" aria-dropeffect="move" aria-grabbed="false">
</div>
</core-drag-and-drop-panel>
Whenever I click inside a tooltipdialog, this border shows up around it.
Is there an easy way to remove this?
EDIT: After trying in different browsers, it seems to affect only Chrome, the outline doesn't appear in Firefox or IE.
I faces the similar issue when i started working on Dojo. To fix this basically you need to add the following css for dijit's dijitTooltipDialog class
.dijitTooltipDialog {
outline : none
}
See this for example.
I think the title of my question accurately describes what I think I want to know.
I would like to be able to emulate/reproduce the exact scrolling functionality of this site https://dotvita.com/.
It seems the background is fixed but only scrolls to a point. Or, more clearly, it scrolls simultaneously with the rest of the content but only to a point. When I looked at the html source, here is what I saw:
<body>
<div id="background"></div>
<body>
and the CSS for the background is:
#background {
position: fixed;
top: -458px;
}
Can you guys tell me what is going on here? Does the above code produce what we see on that site or is there something else going on?
Thanks!
There is indeed something else going on in the background. It looks like they are using Jquery and perhaps a custom script to produce this effect.
For many browsers, you can inspect individual elements or the entire site and see what files are being used. In Google Chrome, you can do this by pressing CTRL+SHIFT+I and clicking the "Resources" tab. Here you can use the file tree on the left to go into Frames > [website name] > Scripts and see the various script files loaded up.
Here is the file that appears to be causing this cool effect:
https://dotvita.com/php/min/?f=js/core/jquery.retina.js,js/core/jquery.resize.js,js/core/jquery.equalHeights.js,libs/qtip/js/jquery.qtip.js,libs/colorbox/js/jquery.colorbox.js,js/plugins.js,js/script.js
In order for this to work, the site needs to have Jquery installed, which is this file:
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
This has been an effect I've been meaning to recreate myself for a while now. Good luck!