I'm far from a CSS guru and am having an issue trying to drag elements from a container at the top with position:fixed to the main content of the page. It is just scrolling down the top container instead of dragging into the main content. Its difficult to explain so I made a fiddle:
http://jsfiddle.net/4wG5t/11/
As you can see, you can't drag any elements from the top into the main body of the page. Also, in the actual page there are a lot of elements in the top section so I need to maintain the horizontal scrollbar. Any help is appreciated!
Thanks!
Also here's the code from the fiddle:
HTML:
<div class="fieldSectionContainer">
<div class="fieldSection">
<ul id="fieldList">
<!-- have loop here -->
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
<li class="fieldClass">field value</li>
</ul>
</div>
</div>
<div style="margin-top:100px">
content below <br/><br/>
content below <br/><br/>
content below <br/><br/>
content below <br/><br/>
content below <br/><br/>
content below <br/><br/>
content below <br/><br/>
content below <br/><br/>
content below <br/><br/>
content below <br/><br/>
content below <br/><br/>
</div>
CSS:
.fieldClass {
display:inline-block;
background-color:white;
border-radius:4px;
width:200px;
margin:5px 5px;
padding: 1px 1px;
text-align:center;
border:1px solid black;
}
.fieldClass:hover {
cursor:move;
}
.fieldSectionContainer {
overflow-y:hidden;
overflow-x:auto;
position:fixed !important;
top:0;
width:100%;
height:100px;
}
.fieldSection {
height:100px;
width:2500px;
font-size:10px;
}
You have to decide a droppable zone for a draggable element. And then it will only accept the dragged element.
Give an id to your last division, and make it an draggalbe zone.
Have a look at this Fiddle
If you put revert to true the box will just move back to its original position.
What are you trying to do?
Your scripts are not yet finish.. If you have a draggable element then you must have a drop function as well..
Have you look for tutorials?..
Here's a link to jquery drag and drop functionality
Or look at this same thread..
But the thread is not yet solved.
I've removed the horizontal scroll.
The following has also been changed:
before-> revert: true
after -> revert: false
You can check it jsfiddle.net/4wG5t/13/
Related
navigation image here
how can i disable the green color there whenever i click in gallery page?
Home
<li class="dropdown mega-dropdown">
<a class="dropdown-toggle" href="Gallery.aspx">Gallery<span class="caret"></span></a>
<div class="pc-nav">
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3 col-md-push-3">
<ul>
<li class="dropdown-header" style="text-align:left">Company Trips</li>
<li style="text-align:left; visibility:hidden;"> 2016 - Vietnam</li>
<li style="text-align:left;"> 2015 - Guilin</li>
</ul>
</li>
</ul>
CSS here
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3 col-md-push-3">
<ul>
<li class="dropdown-header" style="text-align:left">Company Trips</li>
<li style="text-align:left;"> 2016 - Vietnam</li>
<li style="text-align:left;"> 2015 - Guilin</li>
</ul>
</li>
</ul>
I assume the current class indicates the column you have selected. Given the markup you provided in the comments, you can rewrite the rule like this to remove the background color:
.current {
background-color: transparent;
}
If you do not have access to the original code but wish to override it, you can supersede the background-color property like this:
.current {
background-color: transparent !important;
}
But in the end, if you don't wish there to be any special background color for the current column, you can just delete the entire block of code.
EDIT
Based on your feedback, I assume you want to highlight the names of the countries in the list but not the first item of the list. In that case, you can target them like this:
ul.dropdown-menu ul li:not(.dropdown-header) {
background-color: #00b200;
}
For some weird reason i cant change the background of the entire list item even though i selected the list.
Here is the code:
<div class="project-item" ng-controller="openProjectsCtrl">
<ol>
<li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
<h4>{{project.Title}}</h4>
{{project.Skills}}
<span class="col-md-6">{{project.Budget}}</span>
<span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
</li>
</ol>
</div>
<style>
.project-item>ol>li:hover {
background-color: #eee;
}
</style>
The code you posted works fine. See this example.
.project-item>ol>li:hover {
background-color: #eee;
}
<div class="project-item" ng-controller="openProjectsCtrl">
<ol>
<li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
<h4>{{project.Title}}</h4>
{{project.Skills}}
<span class="col-md-6">{{project.Budget}}</span>
<span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
</li>
</ol>
</div>
This code seems to work.
Change the colors its pretty hard to see a gray color on a white background.
.project-item ol li:hover {
background-color: firebrick;
}
<div class="project-item" ng-controller="openProjectsCtrl">
<ol>
<li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
<h4>{{project.Title}}</h4>
{{project.Skills}}
<span class="col-md-6">{{project.Budget}}</span>
<span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
</li>
</ol>
</div>
I resolved the issue by removing float left on first span and just having a float right. That seemed to work.
I am trying to use the 'fixed' class in foundation to keep my topbar fixed at the top when a user scrolls down.
When using it the body of the page goes behind the top navigation bar.
First 3 lines are not visible. I thought about simply pushing it down by creating a margin or some padding at the top. But that won't actually work as the heigh of the top nav bar is not static, it responds to the width of the window.
I have the code here:
http://jsfiddle.net/ancv8bsw/1/
$(document).ready(function () {
$(document).foundation();
})
<div class="contain-to-grid fixed">
<nav class="top-bar" data-topbar data-options="is_hover: false">
<ul class="title-area">
<li class="name">
<h1>
</h1>
</li>
<li class="toggle-topbar menu-icon"><a href><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
Projects
</li>
<li>
Investments
</li>
<li>
Contact Us
</li>
<li>
Contact Us
</li>
<li>
Contact Us
</li>
<li>
Contact Us
</li>
</ul>
</section>
</nav>
</div>
<div>test1</div><div>test2</div><div>test3</div>
<div>test4</div>
<div>test5</div><div>test6</div><div>test7</div><div>test8</div><div>test9</div><div>test10</div><div>test11</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div>
as you can see when narrowing the window the top bar height increases.
Is there a way i can solve this without creating a static margin at the top?
Solved with JS:
$(document).ready(function () {
updateContentOffset();
$(window).resize(function(){
updateContentOffset();
});
function updateContentOffset() {
var offset = $('.contain-to-grid.fixed').height();
$('.content').css('margin-top',offset);
}});
http://jsfiddle.net/ancv8bsw/3/
This script looks to find the height of the container div and update the margin on the content accordingly. You might update your markup classes to something not so generic for the nav container.
I am using jquery mobile and I have a question on how to apply css. I have the image below and I would like the $10 on the same line as the other text, except aligned to the right.
I am used to twitter bootstrap where I would have all of the text on the same row and then have the content sit in different spans (span10 and span2, perhaps). Any advice on how to do this using jquery mobile?
Code:
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="a" style="white-space:normal">
<a class="changePageButton" data-transition="slide">
<li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-c ui-corner-top"><h2>Himalayan Flavors<small> (0.5 mi)</small></h2>
<span style="float:right"><label for="province">$10</label></span>
<right><p>$40 for $20</p></right></li>
<li class="custom_listview_img" style = "background-image:url('http://c.yipitcdn.com/thumbor/SOWRPRFYvkagojw-sA_VPeSKK_k=/408x357/smart/c.yipitcdn.com/deal/20-to-spend-on-food-and-drink-3761-1374483321.jpg');"></li>
</a>
</ul>
<style>
.custom_listview_img {
margin:0px;
padding:0px;
background-repeat:no-repeat;
background-size:100%;
height:150px;
}
</style>
if you are using jquery mobile, you can use
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="a" style="white-space:normal">
<a class="changePageButton" data-transition="slide">
<li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-c ui-corner-top">
<h2>Himalayan Flavors<small> (0.5 mi)</small></h2>
<p class="ui-li-aside"><strong>$10</strong>PM</p>
<p>$40 for $20</p>
</li>
</a>
</ul>
http://jsfiddle.net/4ZbnZ/
Is it possible to have a liquid navigation bar with the links having images. I am trying to have a responsive link with an image on the left and text on the right. If the size of the window changes then the button (link) will change size too. I would prefer to do this with CSS.
What I have tried so far is to have the following:
<div style="height:62px;margin-left:60px;border:solid 1px #FFFFFF;">
<ul class="main_nav">
<li>
<a href="#me">
<img src="img/avatar/me.png" alt="me">
Me
</a>
</li>
<li>
<a href="#guide">
<img src="img/avatar/spotlight.png" alt="guide">
Guide
</a>
</li>
<li>
<a href="#downloads">
<img src="img/avatar/downloads.png" alt="downloads">
Downloads
</a>
</li>
</ul>
<div>