Actually i want a nav-item to act like a dropdown on hover and on click it redirects to another link. I have already tried using css but it does work on hover but on click it shows drop down again istead of redirecting to another page. If someone knows about it then please explain it.
`
.dropdown:hover .dropdown-menu{
display: block;
margin-top: 0px;
}
.dropdown .dropdown-menu{
display: none;
}
`
Related
Is there a way where I could change the normal plain buttons on the header like this one? (Image bellow) I have the debut theme and working on Shopify
image
Add this code into your store css file and change class name where you want to apply image on button. Also you have to add button image into your store setting=> files
After that you have to copy image path and put into background-image ="change here image " in css code
<input type="submit" class="button">
button {
background-image: url(https://cdn.shopify.com/s/files/1/1023/3903/files/Capture12345.png?v=1652449658);
background-repeat: no-repeat;
background-size: cover;
}
you can just simply add background:url('image-url') on button
{
background: url('image-url');
background-position: center;
background-color: transparent;
}
I'm trying to use a CSS transition in a similar manner to https://htmx.org/examples/bulk-update/ to show which row was updated, but I can't get it to work for my example using HTMX 1.3.3
The relevant HTML is:
<div id="replace-me">
<div id="A" hx-get="/A" hx-target="#replace-me" hx-select="#replace-me" hx-swap="outerHTML">A</div>
<div id="B" hx-get="/B" hx-target="#replace-me" hx-select="#replace-me" hx-swap="outerHTML">B</div>
</div>
When either div A or div B is clicked, the server returns the above HTML again, but with class="updated" applied to the div in question.
I also have the following CSS:
.htmx-settling .updated {
background: darkseagreen;
}
.updated {
border: 1px solid black;
}
I would expect to see the clicked div show a border and also flash green. However what I observe is:
I click on div A.
div A shows a border but does not flash.
I click on div B.
div B shows a border, but div A flashes.
From then on, the div that I click on shows a border, but the div that was clicked on the previous turn flashed.
I'm guessing this is something to do with the timing of the application/removal of the htmx-settling class combined with when the swapped content gains the new class. I've read https://htmx.org/docs/#request-operations and https://htmx.org/docs/#css_transitions, but can't see where I'm going wrong.
AFIAK you need transition in you CSS, like from https://htmx.org/docs/#css_transitions
.red {
color: red;
transition: all ease-in 1s ; <========= missing?
}
I'm designing a joomla horizontal scroll website by specifying the width of the body to be 4500px wide and absolute positioning the content I want (tried loads of different ways and this one works the best for me). The problem is bootstrap tooltips dont position themselves correctly if I specify data-position"bottom"
I've tried adding { container: 'body' } to the js tooltip initialisation but it does not fix the problem (as the width of the body is wider than the viewport).
It's annoying the heck out of me, can anyone help please.
I've create a bootply and the code is below for reference
http://www.bootply.com/x1xfg7Z19J
The JS is as follows:
$("[data-toggle=tooltip]").tooltip({container:'body'});
the CSS is as follows:
body {
width: 4500px;
position:relative;
height: 100vh;
overflow-x: visible;
}
.dyno {
position: absolute;
transition: none;
}
.zap-fb {
background-color:#456789;
background-size: 100% 100%;
}
.zap-fb:hover {
background-color:#453698;
}
.zap-li {
background-color:#763456;
background-size: 100% 100%;
}
.zap-li:hover {
background-color:#854a34;
}
.zap-pi {
background-color:#912643;
background-size: 100% 100%;
}
.zap-pi:hover {
background-color:#7269c3;
}
The HTML is as follows:
<p>Scroll to the right to see the tooltip issue. If you position the squares around the center of the screen and hover you will see the bottom positioned tooltip way off to the left. If you position the squares to the right of the screen and hover to see the tool tip it is almost in the right position. Note without body position: relative, the tooltip boxes are wierd dimensions</p>
<a style="width:50px; height:50px; left:3144px; top:20px;" class="zap-fb dyno" data-block="268,292,left,3144,top,20" href="#" target="_blank" title="Spread the Word, Like Us on Facebook" data-toggle="tooltip" data-placement="right"></a>
<a style="width:30px; height:30px; left:2900px; top:10px;" class="zap-li dyno" data-block="240,250,left,2900,top,10" href="#" target="_blank" title="Promote your business whilst promoting ours" data-toggle="tooltip" data-placement="bottom"></a>
<a style="width:70px; height:70px; left:2700px; top:10px;" class="zap-pi dyno" data-block="200,208,left,2700,top,10" href="#" target="_blank" title="Share our work with the world" data-toggle="tooltip" data-placement="left"></a>
EDIT: posted the problem on the bootstrap github issues page: official response "Closing as a won't fix since it's v3." So I guess it is an issue but one that I've got to live with. I did try the scenario with bootstrap 4alpha and the tooltips position themselves correctly.
EDIT 2: using bootplys bootstrap version select, I've found that prior to the introduction of bootstrap 3.2.0, tooltips aligned correctly. I'll try and download 3.1.1 and see if I can spot the error.
I'm using a CMS theme that contains all of Bootstrap 3. Is it possible to add a title block manually in HTML/CSS? I'm not sure if that's the block's official name... it's the purple full-width block containing the text:
CSS
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
in the following link (for example):
http://getbootstrap.com/css/
This title block is built into my theme and is available based on the design for the page I select.
But I was wondering if this block is available separately from Bootstrap, like a Navbar, panel, well, etc. component, that I can just include some HTML/CSS code and have it appear in the body of a page, for example.
No it's not in bootstrap but it's pretty easy to grab the style and use it anywhere:
.bs-docs-header {
font-size: 24px;
padding-bottom: 60px;
padding-top: 60px;
text-align: left;
}
.bs-docs-masthead, .bs-docs-header {
background-color: #6F5499;
background-image: linear-gradient(to bottom, #563D7C 0px, #6F5499 100%);
background-repeat: repeat-x;
color: #CDBFE3;
padding: 30px 15px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
check this jsfiddle
If you look at their source, they are using a stylesheet called docs.min.css, they have defined the background in here. Other then that it is just a simple <div class="container"><!--title and subtitle here-->. So the answer is a yes and a no. You can, of course, use containers seperately from your CMS when using bootstrap, but the background will not be available unless you strip it from the getbootstrap.com source.
Edit
If you see their styles, they are using this code in their docs.min.css:
#media (min-width: 768px)
.bs-docs-header h1 {
font-size: 60px;
line-height: 1;
}
}
This means, when the width of your window is above 768 pixels, it gives the h1 a font-size of 60px. When you fall under it, this code is ignored and the default bootstrap font-size is being applied.
Edit 2
To get a background-color behind it, don't apply the background color to the .container. wrap a div around it without a width value. The container width is not full width, so if you apply a background to it, its only behind the container that is centered.
Edit 3
A simple HTML structure would be something like this (you still have to include all bootstrap styles and default html tags etc.
<html>
<body>
<div id="bgColorDiv">
<div class="container">
<h1>My title</h1>
<p>Paragraph below the title</p>
</div>
</div>
</body>
</html>
I am attempting to popup a cfwindow in the center (or near where I click the mouse) of a very long list of names.
I have no problems getting the window to popup the first time in the middle of where ever I have scrolled to but after closing/hiding the window - subsequent clicks on different names shows the window at the same location as first opened and not in the middle of where the page has scrolled to.
How do I get the window to always open at the center of the page regardless of where I have scrolled down to and regardless of how many times I have already clicked to pop open the cfwindow?
<cfwindow name="wRally" title="View Rally Hours"
source="index.cfm?action=rally_hours&id={mainform:DYN_FORM_VAL}"
height="500" width="500"
bodystyle="margin-left: 0px; margin-top: 0px; padding-top: 0px;
padding-left: 0px; background-color: ffffff;"
refreshonshow="True" center="true" closable="true" draggable="true" ></cfwindow>
<script language="javascript">
function viewRally(myVAL) {
mainform.DYN_FORM_VAL.value = myVAL;
ColdFusion.Window.show("wRally");
}
</script>
onClick="viewRally('EMPLOYEE_ID_123');"
You might need to destroy and recreate the window each time see http://www.raymondcamden.com/index.cfm/2008/9/26/Ask-a-Jedi-Another-CFWINDOW-Example.