I need to load get images and use them in the js justify plugin that I am using on my page.
This is my script:
$(document).ready(function(){
var folder = "img/people";
$.ajax({
url : folder,
success: function (data) {
console.log(data);
}
});
});
var showPhotos = function(photos){
$('.image-container').empty().justifiedImages({
images : photos,
rowHeight: 500,
maxRowHeight: $('.gallery').height(),
thumbnailPath: function(photo, width, height){
var purl = photo.url_s;
if( photo.url_n && (width > photo.width_s * 1.2 || height > photo.height_s * 1.2) ) purl = photo.url_n;
if( photo.url_m && (width > photo.width_n * 1.2 || height > photo.height_n * 1.2) ) purl = photo.url_m;
if( photo.url_z && (width > photo.width_m * 1.2 || height > photo.height_m * 1.2) ) purl = photo.url_z;
if( photo.url_l && (width > photo.width_z * 1.2 || height > photo.height_z * 1.2) ) purl = photo.url_l;
return purl;
},
getSize: function(photo){
return {width: photo.width_s, height: photo.height_s};
},
margin: 1
});
}
But, when I do console.log(data) I get the this:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>listing directory /img/people/</title>
<style>* {
margin: 0;
padding: 0;
outline: 0;
}
body {
padding: 80px 100px;
font: 13px "Helvetica Neue", "Lucida Grande", "Arial";
background: #ECE9E9 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ECE9E9));
background: #ECE9E9 -moz-linear-gradient(top, #fff, #ECE9E9);
background-repeat: no-repeat;
color: #555;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-size: 22px;
color: #343434;
}
h1 em, h2 em {
padding: 0 5px;
font-weight: normal;
}
h1 {
font-size: 60px;
}
h2 {
margin-top: 10px;
}
h3 {
margin: 5px 0 10px 0;
padding-bottom: 5px;
border-bottom: 1px solid #eee;
font-size: 18px;
}
ul li {
list-style: none;
}
ul li:hover {
cursor: pointer;
color: #2e2e2e;
}
ul li .path {
padding-left: 5px;
font-weight: bold;
}
ul li .line {
padding-right: 5px;
font-style: italic;
}
ul li:first-child .path {
padding-left: 0;
}
p {
line-height: 1.5;
}
a {
color: #555;
text-decoration: none;
}
a:hover {
color: #303030;
}
#stacktrace {
margin-top: 15px;
}
.directory h1 {
margin-bottom: 15px;
font-size: 18px;
}
ul#files {
width: 100%;
height: 100%;
overflow: hidden;
}
ul#files li {
float: left;
width: 30%;
line-height: 25px;
margin: 1px;
}
ul#files li a {
display: block;
height: 25px;
border: 1px solid transparent;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
white-space: nowrap;
}
ul#files li a:focus,
ul#files li a:hover {
background: rgba(255,255,255,0.65);
border: 1px solid #ececec;
}
ul#files li a.highlight {
-webkit-transition: background .4s ease-in-out;
background: #ffff4f;
border-color: #E9DC51;
}
#search {
display: block;
position: fixed;
top: 20px;
right: 20px;
width: 90px;
-webkit-transition: width ease 0.2s, opacity ease 0.4s;
-moz-transition: width ease 0.2s, opacity ease 0.4s;
-webkit-border-radius: 32px;
-moz-border-radius: 32px;
-webkit-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.25), inset 0px 1px 3px rgba(0, 0, 0, 0.7), 0px 1px 0px rgba(255, 255, 255, 0.03);
-moz-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.25), inset 0px 1px 3px rgba(0, 0, 0, 0.7), 0px 1px 0px rgba(255, 255, 255, 0.03);
-webkit-font-smoothing: antialiased;
text-align: left;
font: 13px "Helvetica Neue", Arial, sans-serif;
padding: 4px 10px;
border: none;
background: transparent;
margin-bottom: 0;
outline: none;
opacity: 0.7;
color: #888;
}
#search:focus {
width: 120px;
opacity: 1.0;
}
/*views*/
#files span {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
text-indent: 10px;
}
#files .name {
background-repeat: no-repeat;
}
#files .icon .name {
text-indent: 28px;
}
/*tiles*/
.view-tiles .name {
width: 100%;
background-position: 8px 5px;
}
.view-tiles .size,
.view-tiles .date {
display: none;
}
/*details*/
ul#files.view-details li {
float: none;
display: block;
width: 90%;
}
ul#files.view-details li.header {
height: 25px;
background: #000;
color: #fff;
font-weight: bold;
}
.view-details .header {
border-radius: 5px;
}
.view-details .name {
width: 60%;
background-position: 8px 5px;
}
.view-details .size {
width: 10%;
}
.view-details .date {
width: 30%;
}
.view-details .size,
.view-details .date {
text-align: right;
direction: rtl;
}
/*mobile*/
#media (max-width: 768px) {
body {
font-size: 13px;
line-height: 16px;
padding: 0;
}
#search {
position: static;
width: 100%;
font-size: 2em;
line-height: 1.8em;
text-indent: 10px;
border: 0;
border-radius: 0;
padding: 10px 0;
margin: 0;
}
#search:focus {
width: 100%;
border: 0;
opacity: 1;
}
.directory h1 {
font-size: 2em;
line-height: 1.5em;
color: #fff;
background: #000;
padding: 15px 10px;
margin: 0;
}
ul#files {
border-top: 1px solid #cacaca;
}
ul#files li {
float: none;
width: auto !important;
display: block;
border-bottom: 1px solid #cacaca;
font-size: 2em;
line-height: 1.2em;
text-indent: 0;
margin: 0;
}
ul#files li:nth-child(odd) {
background: #e0e0e0;
}
ul#files li a {
height: auto;
border: 0;
border-radius: 0;
padding: 15px 10px;
}
ul#files li a:focus,
ul#files li a:hover {
border: 0;
}
#files .header,
#files .size,
#files .date {
display: none !important;
}
#files .name {
float: none;
display: inline-block;
width: 100%;
text-indent: 0;
background-position: 0 50%;
}
#files .icon .name {
text-indent: 41px;
}
}
</style>
<script>
function $(id){
var el = 'string' == typeof id
? document.getElementById(id)
: id;
el.on = function(event, fn){
if ('content loaded' == event) {
event = window.attachEvent ? "load" : "DOMContentLoaded";
}
el.addEventListener
? el.addEventListener(event, fn, false)
: el.attachEvent("on" + event, fn);
};
el.all = function(selector){
return $(el.querySelectorAll(selector));
};
el.each = function(fn){
for (var i = 0, len = el.length; i < len; ++i) {
fn($(el[i]), i);
}
};
el.getClasses = function(){
return this.getAttribute('class').split(/\s+/);
};
el.addClass = function(name){
var classes = this.getAttribute('class');
el.setAttribute('class', classes
? classes + ' ' + name
: name);
};
el.removeClass = function(name){
var classes = this.getClasses().filter(function(curr){
return curr != name;
});
this.setAttribute('class', classes.join(' '));
};
return el;
}
function search() {
var str = $('search').value
, links = $('files').all('a');
links.each(function(link){
var text = link.textContent;
if ('..' == text) return;
if (str.length && ~text.indexOf(str)) {
link.addClass('highlight');
} else {
link.removeClass('highlight');
}
});
}
$(window).on('content loaded', function(){
$('search').on('keyup', search);
});
</script>
</head>
<body class="directory">
<input id="search" type="text" placeholder="Search" autocomplete="off" />
<div id="wrapper">
<h1>~ / img / people / </h1>
<ul id="files" class="view-tiles"><li><span class="name">..</span><span class="size"></span><span class="date"></span></li>
<li><span class="name">1.jpg</span><span class="size">57195</span><span class="date">5/19/2017 2:02:18 PM</span></li>
<li><span class="name">2.jpg</span><span class="size">83345</span><span class="date">5/19/2017 2:02:18 PM</span></li>
<li><span class="name">3.jpg</span><span class="size">77362</span><span class="date">5/19/2017 2:02:18 PM</span></li>
<li><span class="name">4.jpg</span><span class="size">71906</span><span class="date">5/19/2017 2:02:18 PM</span></li>
<li><span class="name">5.jpg</span><span class="size">90691</span><span class="date">5/19/2017 2:02:18 PM</span></li></ul>
</div>
</body>
</html>
How can I get the images from the folder and then use them in this plugin?
#leff because of browser security framework we cant get location of file.
You will get file path as "C:\fakepath\Capture.PNG". So to resolve that that fakepath. I found one solution, may be this one work.
So what you can do a simple trick that take a variable and assigned it the base address of you file location. After that append the file name with the base address this will give you file location.
Hope this one solve your problem
<!doctype html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>
<input type="file" id="imageFile">
<button id="getFileNameButton">GET-FILE-NAME</button>
</body>
<script type="text/javascript">
$( "#getFileNameButton" ).click(function() {
var baseAddress = "fixed/file/location";
var name = document.getElementById("imageFile").files[0].name; /* get
file name*/
console.log(baseAddress+'/'+name);
});
</script>
</html>
Related
I have a Kendo grid with server side paging/sorting/filtering and with endless scrolling enabled. With this scenario I have the problem that when the grid is filtered, the data is loaded twice. The first time all data is loaded and the second time the filtered data is loaded.
To reproduce the problem you have to do the following steps.
Code Example: https://dojo.telerik.com/#Ruben/OnODErav
Scroll down in the grid until new data is loaded
In the console there should be the event "Grid data bound" two times by now
Set any filter on any column
Now you have the event "Grid data bound" four times in the console, instead of three times!
The error occurs only after you scrolled down. If you restart and only do step three you will see that the event is only fired two times (initial one and after filtering) which is correct.
Does anybody know how I can prevent it from loading the data twice?
function onDataBound(arg) {
kendoConsole.log("Grid data bound");
}
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
dataBound: onDataBound,
filterable: true,
sortable: true,
scrollable: {
endless: true
},
pageable: {
numeric: false,
previousNext: false
},
columns: [{
field:"OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipCity",
title: "Ship City"
}
]
});
});
(function($, undefined){
window.kendoConsole = {
log: function(message, isError, container) {
var lastContainer = $(".console div:first", container),
counter = lastContainer.find(".count").detach(),
lastMessage = lastContainer.text(),
count = 1 * (counter.text() || 1);
lastContainer.append(counter);
if (!lastContainer.length || message !== lastMessage) {
$("<div" + (isError ? " class='error'" : "") + "/>")
.css({
marginTop: -24,
backgroundColor: isError ? "#ffbbbb" : "#b2ebf2"
})
.html(message)
.prependTo($(".console", container))
.animate({ marginTop: 0 }, 300)
.animate({ backgroundColor: isError ? "#ffdddd" : "#ffffff" }, 800);
} else {
count++;
if (counter.length) {
counter.html(count);
} else {
lastContainer.html(lastMessage)
.append("<span class='count'>" + count + "</span>");
}
}
},
error: function(message) {
this.log(message, true);
}
};
})(jQuery);
/*
* jQuery Color Animations
* Copyright 2007 John Resig
* Released under the MIT and GPL licenses.
*/
(function(jQuery) {
// We override the animation for all of these color styles
jQuery.each(["backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor"], function(i, attr) {
jQuery.fx.step[attr] = function(fx) {
if (!fx.state || typeof fx.end == typeof "") {
fx.start = getColor(fx.elem, attr);
fx.end = getRGB(fx.end);
}
fx.elem.style[attr] = ["rgb(", [
Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0),
Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0),
Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0)
].join(","), ")"].join("");
};
});
// Color Conversion functions from highlightFade
// By Blair Mitchelmore
// http://jquery.offput.ca/highlightFade/
// Parse strings looking for color tuples [255,255,255]
function getRGB(color) {
var result;
// Check if we're already dealing with an array of colors
if (color && color.constructor == Array && color.length == 3) {
return color;
}
// Look for rgb(num,num,num)
result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color);
if (result) {
return [parseInt(result[1], 10), parseInt(result[2], 10), parseInt(result[3], 10)];
}
// Look for #a0b1c2
result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color);
if (result) {
return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];
}
// Otherwise, we're most likely dealing with a named color
return jQuery.trim(color).toLowerCase();
}
function getColor(elem, attr) {
var color;
do {
color = jQuery.css(elem, attr);
// Keep going until we find an element that has color, or we hit the body
if (color && color != "transparent" || jQuery.nodeName(elem, "body")) {
break;
}
attr = "backgroundColor";
elem = elem.parentNode;
} while (elem);
return getRGB(color);
}
var href = window.location.href;
if (href.indexOf("culture") > -1) {
$("#culture").val(href.replace(/(.*)culture=([^&]*)/, "$2"));
}
function onlocalizationchange() {
var value = $(this).val();
var href = window.location.href;
if (href.indexOf("culture") > -1) {
href = href.replace(/culture=([^&]*)/, "culture=" + value);
} else {
href += href.indexOf("?") > -1 ? "&culture=" + value : "?culture=" + value;
}
window.location.href = href;
}
$("#culture").change(onlocalizationchange);
})(jQuery);
/*global*/
.floatWrap:after,#example:after{content:"";display:block;clear:both}
.floatWrap,#example{display:inline-block}
.floatWrap,#example{display:block}
.clear{clear:both}
body,h1,h2,h3,h4,p,ul,li,a,button
{
margin:0;
padding:0;
list-style:none;
}
html
{
top: 0;
left: 0;
overflow-y:scroll;
font:75% Arial, Helvetica, sans-serif;
background: #f5f7f8;
}
body
{
margin: 0;
padding: 0;
}
a,
li>a,
h2>a,
h3>a,
a
{
text-decoration:none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
a
{
color: #0487c4;
}
a:hover
{
text-decoration: underline;
}
.page
{
max-width:72%;
margin: 2% auto;
padding: 3% 5% 0;
background: #fff;
border: 1px solid #e2e4e7;
}
.offline-button {
display: inline-block;
margin: 0 0 30px;
padding: 9px 23px;
background-color: #015991;
border-radius: 2px;
color: #fff;
text-decoration: none;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
transition-duration: 0.2s;
transition-property: background-color;
transition-timing-function: ease;
}
.offline-button:hover {
background-color: #013a5e;
color: #fff;
text-decoration: none;
}
#example
{
margin: 2em 0 5em;
padding: 0;
border: 0;
background: transparent;
font-size: 14px;
}
/*console*/
.console
{
background-color: transparent;
color: #333;
font: 11px Consolas, Monaco, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
margin: 0;
overflow-x: hidden;
text-align: left;
height: 200px;
border: 1px solid rgba(20,53,80,0.1);
background-color: #ffffff;
text-indent: 0;
}
.demo-section .box-col .console
{
min-width: 200px;
}
.console .count
{
background-color: #26c6da;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
color: #ffffff;
font-size: 10px;
margin-left: 5px;
padding: 2px 6px 2px 5px;
}
.console div
{
background-position: 6px -95px;
border-bottom: 1px solid #DDD;
padding: 5px 10px;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.console .error
{
background-position: 6px -135px;
}
/*configurator*/
.centerWrap .configuration,
.configuration,
.configuration-horizontal
{
margin: 4.5em auto;
padding: 3em;
background-color: rgba(20,53,80,0.038);
border: 1px solid rgba(20,53,80,0.05);
}
.absConf .configuration
{
position: absolute;
top: -1px;
right: -1px;
height: auto;
margin: 0;
z-index: 2;
}
.configuration-horizontal
{
position: static;
height: auto;
min-height: 0;
margin: 0 auto;
zoom: 1;
}
.configuration-horizontal-bottom
{
margin: 20px -21px -21px;
position: static;
height: auto;
min-height: 0;
width: auto;
float:none;
}
.configuration .configHead,
.configuration .infoHead,
.configuration-horizontal .configHead,
.configuration-horizontal .infoHead
{
display: block;
margin-bottom: 1em;
font-size: 12px;
line-height: 1em;
font-weight: bold;
text-transform: uppercase;
}
.configuration .configTitle,
.configuration-horizontal .configTitle
{
font-size: 12px;
display: block;
line-height: 22px;
}
.configuration .options,
.configuration-horizontal .options
{
list-style:none;
margin: 0;
padding: 0;
}
.configuration button,
.configuration-horizontal button
{
margin: 0;
vertical-align: middle;
}
.configuration .k-textbox,
.configuration-horizontal .k-textbox
{
margin-left: 7px;
width: 30px;
}
.configuration .options li { display: block; margin: 0; padding: 0.2em 0; zoom: 1; }
.configuration .options li:after,
.configuration-horizontal:after
{
content: "";
display: block;
clear: both;
height: 0;
}
.configuration-horizontal .config-section
{
display: block;
float: left;
min-width: 200px;
margin: 0;
padding: 10px 20px 10px 10px;
}
.configuration label,
.configuration input
{
vertical-align: middle;
line-height: 20px;
margin-top: 0;
}
.configuration label
{
float: left;
}
.configuration input
{
width: 40px;
}
.configuration input,
.configuration select,
.configuration .k-numerictextbox
{
float: right;
}
.configuration input.k-input
{
float: none;
}
.configuration .k-button,
.configuration .k-widget
{
margin-bottom: 3px;
}
/* Code Viewer */
.source {
background-color: #f5f7f8;
margin: 0 0 5em;
border: 1px solid rgba(20,53,80,0.05);
}
.source .code {
background-color: #fff;
border-top: 1px solid rgba(20,53,80,0.08);
padding: 20px 0 0;
}
.source .code pre {
margin: 0;
padding: 0 20px 20px;
}
.source .offline-button {
background: none;
text-decoration: none;
color: #0487c4;
margin: 10px 0 10px 14px;
padding: 10px;
}
.source .offline-button.selected {
color: #000;
}
.source .code .controller {
display: none;
}
/* Pretty Print */
.prettyprint
{
font-size: 12px;
overflow: auto;
}
pre .nocode { background-color: transparent; color: #000; }
pre .str, /* string */
pre .atv { color: #2db245; } /* attribute value */
pre .kwd { color: #ff3399; } /* keyword */
pre .com { color: #9933cc; } /* comment */
pre .typ { color: #000; } /* type */
pre .lit { color: #0099ff; } /* literal */
pre .pun { color: #333; } /* punctuation */
pre .pln { color: #3e526b; } /* plaintext */
pre .tag { color: #3e526b; } /* html/xml tag */
pre .atn { color: #3e526b; } /* attribute name */
pre .dec { color: #3e526b; } /* decimal */
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #333; }
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
li.L1,li.L3,li.L5,li.L7,li.L9 { background: #eee; }
/*keyboard navigation legend */
.key-button {
display: inline-block;
text-decoration: none;
color: #555;
min-width: 20px;
margin: 0;
padding: 3px 5px;
font-size: 12px;
text-align: center;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
background: #eee;
box-shadow: 0 1px 0 1px rgba(0,0,0,0.1), 0 2px 0 rgba(0,0,0,0.1);
}
.widest {}
.wider {}
.wide {}
.leftAlign, .rightAlign, .centerAlign {text-align: left;}
.letter {
padding-top: 14px;
padding-bottom: 11px;
font-weight: bold;
font-size: 17px;
}
ul.keyboard-legend {
list-style-type: none;
margin: 0 auto;
padding: 0;
text-align: left;
}
#example ul.keyboard-legend li,
.demo-section .box-col ul.keyboard-legend li {
display: block;
margin: 0;
padding: 4px 0;
line-height: 1.5em;
}
ul.keyboard-legend li a {
color: #0487C4;
}
.button-preview {
display: inline-block;
vertical-align: top;
padding: 0 5px 0 0;
}
.button-descr {
display: inline-block;
vertical-align: top;
text-align: left;
padding: 3px 0;
}
.demo-section p a.hyperlink,
.config-section a {
color: #e15613;
text-decoration: none;
}
.chart-wrapper,
.map-wrapper,
.diagram-wrapper {
position: relative;
height: 430px;
margin: 0 auto 15px auto;
padding: 10px;
}
#example.absConf .chart-wrapper,
#example.absConf .map-wrapper,
#example.absConf .diagram-wrapper
{
margin-left: 0;
}
.chart-wrapper .k-chart,
.map-wrapper .k-map,
.diagram-wrapper .k-diagram {
height: 430px;
}
.config-section.console-section
{
width: 400px;
float: right;
}
#page > h2 {
float: none;
text-align: center;
width: auto;
padding: 5em 0 1em;
font-size: 3em;
}
#suites .imgPlate,
#suites .box {
border-width: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#suites {
text-align: center;
}
#suites .box {
float: none;
clear: none;
display: inline-block;
width: auto;
min-width: auto;
}
#suites .box h2 {
margin-top: 1em;
}
#draggable
{
cursor: pointer;
position: absolute;
top: 210px;
left: 30px;
border: 1px solid #ff8000;
width: 78px;
height: 78px;
border-radius: 37px;
box-shadow: 2px 0 10px #9d9d9d;
background: #ffcc00 url(../../web/dragdrop/draggable.png) 50% 50% no-repeat;
background: url(../../web/dragdrop/draggable.png) 50% 50% no-repeat, -moz-linear-gradient(top, #ffcc00 0%, #ff8000 100%);
background: url(../../web/dragdrop/draggable.png) 50% 50% no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcc00), color-stop(100%,#ff8000));
background: url(../../web/dragdrop/draggable.png) 50% 50% no-repeat, -webkit-linear-gradient(top, #ffcc00 0%,#ff8000 100%);
background: url(../../web/dragdrop/draggable.png) 50% 50% no-repeat, -o-linear-gradient(top, #ffcc00 0%,#ff8000 100%);
background: url(../../web/dragdrop/draggable.png) 50% 50% no-repeat, -ms-linear-gradient(top, #ffcc00 0%,#ff8000 100%);
background: url(../../web/dragdrop/draggable.png) 50% 50% no-repeat, linear-gradient(top, #ffcc00 0%,#ff8000 100%);
}
#draggable.hollow
{
cursor: default;
background: #ececec;
border-color: #cbcbcb;
}
/* Box Styles */
.box {
margin: 4.5em 7.5em;
padding: 3em;
background-color: rgba(20,53,80,0.038);
border: 1px solid rgba(20,53,80,0.05);
}
.demo-section {
margin: 0 auto 4.5em;
padding: 3em;
border: 1px solid rgba(20,53,80,0.14);
}
.demo-section:not(.wide),
#example .box:not(.wide) {
max-width: 400px;
}
.box:after,
.demo-section:after {
content: "";
display: block;
clear: both;
height: 0;
}
#example .box {
margin: 4.5em auto;
}
#example .box:first-child {
margin-top: 0;
}
.demo-section.k-content {
box-shadow: 0 1px 2px 1px rgba(0,0,0,.08), 0 3px 6px rgba(0,0,0,.08);
}
.box h4,
.demo-section h4 {
margin-bottom: 1em;
font-size: 12px;
line-height: 1em;
font-weight: bold;
text-transform: uppercase;
}
.box-col {
display: block;
float: left;
padding: 0 3em 1.667em 0;
}
.box ul:not(.km-widget) li,
.demo-section .box-col ul:not(.km-widget) li {
line-height: 3em;
}
.box li:last-child {
margin-bottom: 0;
}
.box li a {
font-size: 13px;
}
.box .k-widget {
background-color: #ebeef0;
border-color: #ccc;
color: #7c7c7c;
}
.box .k-widget.k-slider {
background-color: transparent;
}
.box .k-button {
cursor: pointer;
border-radius: 2px;
font-size: inherit;
color: #333;
background: #e2e4e7;
border-color: #e2e4e7;
min-width: 90px;
box-shadow: none;
}
.box .k-upload-status .k-button-bare {
min-width: 0;
}
.box .k-button:hover,
.box .k-button:focus:active:not(.k-state-disabled):not([disabled]),
.box .k-button:focus:not(.k-state-disabled):not([disabled]) {
background: #cad0d6;
border-color: #cad0d6;
color: #000;
box-shadow: none;
}
.box .k-primary {
color: #fff;
background: #015991;
border-color: #015991;
}
.box .k-primary:hover,
.box .k-primary:focus:active:not(.k-state-disabled):not([disabled]),
.box .k-primary:focus:not(.k-state-disabled):not([disabled]) {
background: #013A5E;
border-color: #013A5E;
color: #fff;
}
.box .k-textbox,
.box textarea {
background: #fff;
border-color: #e2e4e7;
color: #555;
border-radius: 2px;
}
.box .k-textbox:hover,
.box .k-textbox:active,
.box .k-textbox:focus,
.box textarea:hover,
.box textarea:active,
.box textarea:focus {
border-color: #cad0d6;
background: #fff;
color: #333;
box-shadow: none;
}
.box.demo-description p {
line-height: 1.5em;
max-width: 1000px;
padding-bottom: 1em;
}
.box.demo-description p:last-child {
padding-bottom: 0;
}
.box.demo-description ul,
.box.demo-description ul li {
list-style: disc inside;
line-height: 1.5em;
max-width: 1000px;
}
.box.demo-description ol,
.box.demo-description ol li {
list-style: decimal inside;
line-height: 1.5em;
max-width: 1000px;
}
.box.demo-description ul,
.box.demo-description ol {
margin: 1em;
padding: 0;
}
.demo-hint {
line-height: 22px;
color: #aaa;
font-style: italic;
font-size: .9em;
padding-top: 1em;
}
.responsive-message {
font-size: 17px;
display: none;
margin: 4em auto;
padding: 2.5em;
text-align: center;
background-color: #ffda3f;
color: #000;
}
.responsive-message:before {
content: "This demo requires browser or device screen width to be equal or greater than 1024px.";
}
#media screen and (max-width: 1023px) {
.page {
max-width:100%;
margin: 0;
padding: 10px;
background: #fff;
border: 0;
}
.hidden-on-narrow {
display: none !important;
}
.responsive-message {
display: block;
}
}
div.console div {
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/remote-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<div class="box wide">
<h4>Console log</h4>
<div class="console"></div>
</div>
</div>
</body>
</html>
The Problem seems to be by design and it will not be changed in the near future.
We are considering improvements in dataSource requests. The current
state is with two calls because we use the first one to reset the
state of the datasource and the second one to apply the sorting.
Source: https://github.com/telerik/kendo-ui-core/issues/5462#issuecomment-563259073
Not sure how to prevent it.
Deep in kendo.all.js, in the FilterMenu widget filter method, is where the doubling appears to be happening:
filter: function (expression) {
var filters = this._stripFilters(expression.filters);
if (filters.length && this.trigger('change', {
filter: {
logic: expression.logic,
filters: filters
},
field: this.field
})) {
return;
}
expression = this._merge(expression);
if (expression.filters.length) {
this.dataSource.filter(expression);
}
},
This first time after a scroll that causes a data page to be loaded, a UI filtering will cause:
this.trigger('change', to issue the request causing the first dataBound, and
this.dataSource.filter(expression); to issue the request causing the second dataBound
Looking at the debugger network tab you will see the framework issues two GET requests. (I changed my page size to 8 so the URL parameters have top=8):
https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders?$callback=jQuery1123011816937403352101_1583588644905&%24inlinecount=allpages&%24format=json&%24top=8
https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders?$callback=jQuery1123011816937403352101_1583588644905&%24inlinecount=allpages&%24format=json&%24top=8&%24filter=startswith(ShipName%2C%27h%27)
Best responses would likely come from Progress forums. You might need to be registered or licensed to post new questions there.
I have a custom range I have styled and modified.
For each step there is a text value displayed underneath the range in a green box, and icons at the top of each step.
I would like to know, how can I change the background color of the icons when a step has been selected? I have added some additional javascript code that is not working properly.
For instance, on the first step, the group icon will be green, and when you select the next step the person will be green and the group will change to default grey, and so on and so forth...
Thank you.
var arr = new Array();
arr[1] = "everyone";
arr[2] = "show my group only";
arr[3] = "show only me";
var rangeSlider = function() {
var slider = $(".range-slider"),
range = $(".range-slider__range"),
value = $(".range-slider__value");
slider.each(function() {
value.each(function() {
var value = $(this)
.prev()
.attr("value");
$(this).html(arr[value]);
});
range.on("input", function() {
$(this)
.next(value)
.html(arr[this.value]);
});
// Set active icons
$('.range-icons li').removeClass('active selected');
var icons = $('.range-icons').find('li:nth-child(' + icons + ')');
icons.addClass('active selected');
return style;
});
};
rangeSlider();
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
padding: 60px 20px;
}
#media (min-width: 600px) {
body {
padding: 60px;
}
}
.range-slider {
margin: 0;
}
.range-slider {
width: 24%;
}
.range-slider__range {
-webkit-appearance: none;
/*width: calc(100% - (73px));*/
width: 100%;
height: 6px;
border-radius: 5px;
background: #d7dcdf;
outline: none;
padding: 0;
margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
transition: background .15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
width: 18px;
height: 18px;
border: 0;
border-radius: 50%;
background: #2c3e50;
cursor: grab;
transition: background .15s ease-in-out;
}
.range-slider__range:active::-moz-range-thumb {
cursor: grabbing;
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb:hover {
background: #1abc9c;
}
.range-slider__value {
display: block;
position: relative;
color: #fff;
font-size: 12px;
margin-top: 10px;
line-height: 20px;
text-align: center;
background: green;
padding: 0;
}
/*.range-slider__value:after {
position: absolute;
top: 8px;
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #2c3e50;
border-bottom: 7px solid transparent;
content: '';
}*/
::-moz-range-track {
background: #d7dcdf;
border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}
/*.range-labels {
margin: 9px -21px 0;
padding: 0;
list-style: none;
}
.range-labels li {
position: relative;
float: left;
width: 60px;
text-align: center;
color: #b2b2b2;
font-size: 14px;
cursor: pointer;
}
.range-labels .active {
color: #37adbf;
}
.range-labels .selected::before {
background: #37adbf;
}
.range-labels .active.selected::before {
display: none;
}*/
/*icons*/
.range-icons {
margin: 9px -20px 0;
padding: 0;
list-style: none;
}
.range-icons li {
position: relative;
float: left;
width: 33%;
text-align: center;
color: #b2b2b2;
font-size: 10px;
}
.range-icons .active {
color: #37adbf;
}
.range-icons .selected::before {
background: #37adbf;
}
.range-icons .active.selected::before {
display: none;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="range-slider">
<ul class="range-icons clearfix">
<li class="active selected"><i class="material-icons">group</i></li>
<li><i class="material-icons">person</i></li>
<li><i class="material-icons">lock</i></li>
</ul>
<input class="range-slider__range" type="range" value="1" min="1" max="3" step="1">
<span class="range-slider__value">0</span>
</div>
you can create classes and add the apropriate class with addClass whenever the the range input changes in range.on("input", with
$('.material-icons:nth('+ ( this.value - 1) +')').addClass('class-'+(this.value))
since your this.value starts from 1 :
var arr = new Array();
arr[1] = "everyone";
arr[2] = "show my group only";
arr[3] = "show only me";
var rangeSlider = function() {
var slider = $(".range-slider"),
range = $(".range-slider__range"),
value = $(".range-slider__value");
slider.each(function() {
value.each(function() {
var value = $(this)
.prev()
.attr("value");
$(this).html(arr[value]);
});
range.on("input", function() {
$(this)
.next(value)
.html(arr[this.value]);
$('.material-icons').attr('class', 'material-icons')
$('.material-icons:nth('+ ( this.value - 1) +')').addClass('material-icons class-'+(this.value))
});
});
};
rangeSlider();
*, *:before, *:after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
padding: 60px 20px;
}
#media (min-width: 600px) {
body {
padding: 60px;
}
}
.range-slider {
margin: 0;
}
.range-slider {
width: 24%;
}
.range-slider__range {
-webkit-appearance: none;
/*width: calc(100% - (73px));*/
width: 100%;
height: 6px;
border-radius: 5px;
background: #d7dcdf;
outline: none;
padding: 0;
margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
transition: background .15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
width: 18px;
height: 18px;
border: 0;
border-radius: 50%;
background: #2c3e50;
cursor: grab;
transition: background .15s ease-in-out;
}
.range-slider__range:active::-moz-range-thumb {
cursor: grabbing;
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb:hover {
background: #1abc9c;
}
.range-slider__value {
display: block;
position: relative;
color: #fff;
font-size: 12px;
margin-top: 10px;
line-height: 20px;
text-align: center;
background: green;
padding: 0;
}
/*.range-slider__value:after {
position: absolute;
top: 8px;
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #2c3e50;
border-bottom: 7px solid transparent;
content: '';
}*/
::-moz-range-track {
background: #d7dcdf;
border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}
/*.range-labels {
margin: 9px -21px 0;
padding: 0;
list-style: none;
}
.range-labels li {
position: relative;
float: left;
width: 60px;
text-align: center;
color: #b2b2b2;
font-size: 14px;
cursor: pointer;
}
.range-labels .active {
color: #37adbf;
}
.range-labels .selected::before {
background: #37adbf;
}
.range-labels .active.selected::before {
display: none;
}*/
/*icons*/
.range-icons {
margin: 9px -20px 0;
padding: 0;
list-style: none;
}
.range-icons li {
position: relative;
float: left;
width: 33%;
text-align: center;
color: #b2b2b2;
font-size: 10px;
}
/* classes with colors you want */
.class-1{
color: red;
}
.class-2{
color: blue;
}
.class-3{
color: orange;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="range-slider">
<ul class="range-icons clearfix">
<li class="active selected"><i class="material-icons class-1">group</i></li>
<li><i class="material-icons">person</i></li>
<li><i class="material-icons">lock</i></li>
</ul>
<input class="range-slider__range" type="range" value="1" min="1" max="3" step="1">
<span class="range-slider__value">0</span>
</div>
One methos I use is using svg icons and implement the raw code. You can then manipulate this source with clases and style settings.
Look inside the svg source and finmd the path and rect tags.
document.getElementById("ranger").onchange = function(event) {
document.querySelector(".symbol.standard").style.fill = "rgb(" + event.target.value + ", 80, 160)";
}
svg {
width:200px;
.symbol.standard {
fill: #f00;
}
.symbol.other {
fill: rgb(80, 80, 160);
}
<input id="ranger" type='range' min="0" max="255">
<svg class="singleseat " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90.3 63.3"> <title>seat</title>
<rect class="symbol standard" x="16.7" width="57" height="49" rx="12" ry="12"></rect>
<path class="symbol other" d="M79.9,15.8V42.3a12,12,0,0,1-12,12H22.5a12,12,0,0,1-12-12V15.8H0V51.3a12,12,0,0,0,12,12H78.3a12,12,0,0,0,12-12V15.8Z"></path>
</svg>
I have created an accordion which I would like to populate using JSON from this link : http://design.propcom.co.uk/buildtest/accordion-data.json
Here is my html:
<div class="accordion js-accordion">
<div class="accordion__item js-accordion-item active">
<div class="accordion-header js-accordion-header"></div>
<div class="accordion-body js-accordion-body" >
<div class="accordion-body__contents" ></div>
</div><!-- end of accordion body -->
</div><!-- end of accordion item -->
<div class="accordion__item js-accordion-item ">
<div class="accordion-header js-accordion-header"></div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header"></div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
</div><!-- end of accordion -->
I am trying to populate the accordion-header js-accordion-header div with the "heading" data from the JSON file and accordion-body__contents with the "contents" data.
This is as far as I have got with the Javascript part:
$.ajax({
url: 'http://design.propcom.co.uk/buildtest/accordion-data.json',
type: 'GET',
dataType: 'JSON',
success: function (data) {
$.each(data.blocks, function(index, element) {
$(".accordion-header").append("<div>" + element.heading + "</div>");
$(".accordion-body__contents").append("<div>" + element.content + "</div>");
});
}
});
Any help would be greatly appreciated as I feel like I've hit a wall with my current efforts.
There are a few issues here:
We're a bit off when handling the AJAX results
Use the data.blocks property and while looping use the element variable.
As #Danny suggested we have extra AJAX properties
Remove the callback and data properties.
Lastly your html seems over complicated
After seeing the css from your demo site, I was able to include it and remove the JQueryUI thought. Now be sure to append the entire accordion__item element.
With these problems ironed out it should look similar to this:
$.ajax({
url: 'https://design.propcom.co.uk/buildtest/accordion-data.json',
type: 'GET',
dataType: 'JSON',
success: function (data) {
$.each(data.blocks, function(index, element) {
$(".accordion")
.append(`<div class="accordion__item js-accordion-item ">
<div class="accordion-header js-accordion-header">${element.heading}</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">${element.content}</div>
</div>
</div>`);
});
var accordion = (function(){
var $accordion = $('.js-accordion');
var $accordion_header = $accordion.find('.js-accordion-header');
var $accordion_item = $('.js-accordion-item');
// default settings
var settings = {
// animation speed
speed: 400,
// close all other accordion items if true
oneOpen: false
};
return {
// pass configurable object literal
init: function($settings) {
$accordion_header.on('click', function() {
accordion.toggle($(this));
});
$.extend(settings, $settings);
// ensure only one accordion is active if oneOpen is true
if(settings.oneOpen && $('.js-accordion-item.active').length > 1) {
$('.js-accordion-item.active:not(:first)').removeClass('active');
}
// reveal the active accordion bodies
$('.js-accordion-item.active').find('> .js-accordion-body').show();
},
toggle: function($this) {
if(settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
$this.closest('.js-accordion')
.find('> .js-accordion-item')
.removeClass('active')
.find('.js-accordion-body')
.slideUp()
}
// show/hide the clicked accordion item
$this.closest('.js-accordion-item').toggleClass('active');
$this.next().stop().slideToggle(settings.speed);
}
}
})();
$(document).ready(function(){accordion.init({ speed: 300, oneOpen: true });});
}
});
body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}/* CSS Document */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion js-accordion">
</div>
After skimming your demo, I've included your CSS into my example.
Need help.
I want to make content input are same as keyin when selected and disable dropdown when edit at textarea.
Currently, content will appear after dropdown. When key-in at textarea and select that list, its not appears same as key-in at top when close. After select that list, when try to key-in, dropdown will open. How to disable it.
$(document).on('click', '.btn-select', function (e) {
e.preventDefault();
var ul = $(this).find("ul");
if ($(this).hasClass("active")) {
if (ul.find("li").is(e.target)) {
var target = $(e.target);
target.addClass("selected").siblings().removeClass("selected");
var value = target.html();
$(this).find(".btn-select-input").val(value);
$(this).find(".btn-select-value").html(value);
}
ul.hide();
$(this).removeClass("active");
}
else {
$('.btn-select').not(this).each(function () {
$(this).removeClass("active").find("ul").hide();
});
ul.slideDown(300);
$(this).addClass("active");
}
});
$('.dropinput').click(function(e) {
e.stopPropagation();
});
.form-control {
background-color: #fff;
background-image: none;
border: 1px solid #e9e9e9;
border-radius: 3px;
box-shadow: none;
color: #4f5858;
display: block;
font-size: 13px;
height: 34px;
line-height: 1.42857;
padding: 6px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;
font-weight: normal;
margin: 0px;
}
.form-control:focus {
border-color: #b6b6b6;
box-shadow: none;
outline: 0 none;
}
.close {
color: #4f5858;
text-shadow: none;
font-weight: normal;
font-size: 26px;
opacity: 1.0;
}
.close:hover, .close:focus {
color: #000;
opacity: 0.5;
}
.form-control::-moz-placeholder {
color: #4f5858;
}
.btn-grey {
background-color: #fff;
border: 1px solid #e9e9e9;
border-radius: 50%;
color: #4f5858;
cursor: pointer;
display: block;
font-weight: 300;
height: 60px;
margin: 0px auto 0;
text-align: center;
text-transform: uppercase;
transition: opacity 0.25s ease-in-out 0s;
width: 60px;
font-size: 11px;
display: inline;
}
.btn-grey:hover {
border: none;
color: #fff;
background-color: #f05423;
}
.btn-select {
position: relative;
padding: 6px;
width: 100%;
border-radius: 3px;
}
.btn-select .btn-select-value {
padding: 2px 6px;
display: block;
position: absolute;
left: 0;
right: 35px;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
border: none !important;
}
.btn-select .btn-select-arrow {
float: right;
line-height: 18px;
padding: 3px 10px;
top: 0;
font-size: 10px;
}
.btn-select ul {
display: none;
background-color: #fff;
color: #4f5858;
clear: both;
list-style: none;
padding: 0;
margin: 0;
position: absolute;
right: -0.5px;
left: -1px;
top: 33px;
z-index: 999;
}
.btn-select ul li {
padding: 6px;
text-align: left;
background-color: #fff;
display: flex;
}
.btn-select ul li:hover {
background-color: #fff;
color: #f05423;
}
.btn-select ul li span {
color: #b3b3b3;
position: absolute;
left: 10px;
}
.btn-select ul li.selected {
color: #f05423;
}
.btn-select.btn-default:hover, .btn-select.btn-default:active, .btn-select.btn-default.active {
border-color: #b6b6b6;
background-color: #fff;
}
.btn-select.btn-default ul li.selected {
background-color: #fff;
}
.btn-select.btn-default ul, .btn-select.btn-default .btn-select-value {
background-color: transparent;
border: #b6b6b6 1px solid;
border-top: 0px;
}
.btn-default {
color: #4f5858;
background-color: #fff;
border-color: #e9e9e9;
font-size: 13px;
font-weight: normal;
}
.btn.active, .btn:active {
-webkit-box-shadow: none;
box-shadow: inone;
}
.btn-default span {
color: #4f5858;
}
.btn-select.btn-default ul li.selected span {
color: #4f5858;
}
textarea.form-control {
height: 100px;
}
.dropinput {
color: #000;
background-color: #ebebeb;
border: none;
padding: 2px 5px;
margin-left: 10px;
width: 170px;
font-size: 12px;
}
.oth {
width: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
<a class="btn btn-default btn-select">
<input class="btn-select-input" type="hidden">
<span class="btn-select-value">Purpose of Enquiry</span>
<span class="btn-select-arrow glyphicon glyphicon-triangle-bottom"></span>
<ul style="display: none;">
<li>Media & Publications</li>
<li>New Business Collaborations<input maxlength="30" class="dropinput" type="text" placeholder="Please specify project location"></li>
<li>Others<input maxlength="58" class="dropinput oth" type="text" placeholder="Please specify"></li>
</ul>
</a>
</div>
tq
There you go:
function init(){
$(document).on('click', '.btn-select', function (e) {
if(document.activeElement==$(this).find('.btn-select-value input')[0]) // prevent opening when textfield is focused
return
e.preventDefault();
var ul = $(this).find("ul");
if ($(this).hasClass("active")) {
if (ul.find("li").is(e.target)) {
selectLine(this,$(e.target))
}
ul.hide();
$(this).removeClass("active");
}
else {
$('.btn-select').not(this).each(function () {
$(this).removeClass("active").find("ul").hide();
});
ul.slideDown(300);
$(this).addClass("active");
}
});
$('.dropinput').blur(function(e) {
if(e.currentTarget.value.length==0) // if nothing has been entered, skip
return
var dropdown = $(e.currentTarget).parent().parent().parent();
var ul = dropdown.children('ul')
selectLine(dropdown[0],$(e.currentTarget).parent())
ul.hide();
dropdown.removeClass("active");
});
$('.dropinput').click(function(e) {
e.stopPropagation();
});
}
function selectLine(dropdown,target){
var input_text = target.find('input').val() // take input value from input in list
target.addClass("selected").siblings().removeClass("selected");
var value = target.html();
$(dropdown).find(".btn-select-input").val(value);
$(dropdown).find(".btn-select-value").html(value);
$(dropdown).find(".btn-select-value input").val(input_text); // put input value into input in selected input
}
$(document).ready(init)
It's quite the spaghetti code, but it works. It's always smart to wrap your code into an init function which will get called once your document is ready.
So I made a pretty simple function that causes a dropdown-menu to show up. It worked fine on my PC but not on my mobile devices. When I click the element which should show the dropdown menu, the dropd. menu doesn't show up. Actually nothing happens.
After some debugging it seems that this loop makes some trouble:
for (i=0;i <= faecher.length;i++) {$(id(faecher[i])).html(faecher[i]+" ▼");}
Here a snippet:
function getMouseX() {
return (event.clientX + document.body.scrollLeft);
}
function getMouseY() {
return (event.clientY + document.body.scrollTop);
}
// Position of an element relative to left --> x coordinate
function getLiX(element) {
var pos = $(element).position();
return pos.left;
}
// Position of an element relative to top --> y coordinate
function getLiY(element) {
return $(element).height();
}
// Just a name list for my elements
var faecher = ["physik", "mathematik", "chemie", "latein", "info", "profil"];
// Sets a # before an element name
function id(id) {
return "#" + id;
}
// The main dropdown function
function dd(ex) {
var jId = id(ex);
document.getElementById("agenda").innerHTML = "1";
for (i = 0; i <= faecher.length; i++) {
$(id(faecher[i])).html(faecher[i] + " ▼");
}
document.getElementById("agenda").innerHTML = "2";
$(jId).html(ex + " ▲");
document.getElementById("agenda").innerHTML = "3";
for (i = 0; i <= faecher.length; i++) {
$(id(faecher[i])).css({
"background": "none",
"color": "#ffffff"
});
}
document.getElementById("agenda").innerHTML = "4";
$(jId + "DD").css('position', 'absolute');
document.getElementById("agenda").innerHTML = "5";
$(jId + "DD").css('top', getLiY(jId));
document.getElementById("agenda").innerHTML = "6";
$(jId + "DD").css('left', getLiX(jId));
document.getElementById("agenda").innerHTML = "7";
if ($(jId + "DD").css("display") != "none") {
$(jId).css({
"background": "none",
"color": "#ffffff"
});
$(jId).html(ex + " ▼");
} else {
$(jId).css({
"background": "rgba(255, 255, 255, 0.97)",
"color": "#000000"
});
for (i = 0; i <= faecher.length; i++) {
$(id(faecher[i] + "DD")).slideUp(250);
}
}
document.getElementById("agenda").innerHTML = "8";
$(jId + "DD").outerWidth($(jId).outerWidth());
document.getElementById("agenda").innerHTML = "9";
$(jId + "DD").slideToggle(500);
document.getElementById("agenda").innerHTML = "10";
}
function physikClick() {
document.getElementById("agenda").innerHTML = "Click";
dd("physik");
} // .innerHTML just for debugging
function mathematikClick() {
dd("mathematik");
}
function chemieClick() {
dd("chemie");
}
function lateinClick() {
dd("latein");
}
function infoClick() {
dd("info");
}
function profilClick() {
dd("profil")
}
#font-face {
font-family: "aspace";
src: local("../media/font/aspace.otf"), url("../media/font/aspace.otf") format("OpenType")
}
#font-face {
font-family: "Nero";
src: local("../media/font/nero.otf"), url("../media/font/nero.otf") format("OpenType")
}
#font-face {
font-family: "MOONBEAM";
src: local("../media/font/moonbeam.ttf"), url("../media/font/moonbeam.ttf") format("TrueType")
}
#font-face {
font-family: "GOOD TIMES";
src: local("../media/font/goodtimes.ttf"), url("../media/font/goodtimes.ttf") format("TrueType")
}
#font-face {
font-family: "Induction";
src: local("../media/font/induction.ttf"), url("../media/font/induction.ttf") format("TrueType")
}
#font-face {
font-family: "Ethnocentric";
src: local("../media/font/ethnocentric.ttf"), url("../media/font/ethnocentric.ttf") format("TrueType")
}
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
body {
background-size: cover;
overflow: auto;
background-repeat: repeat-x;
font-family: Arial, Helvetica;
text-align: justify;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #335588;
/*background-image:url(../media/img/wa3.jpg),url(../media/img/wa2.jpg),url(../media/img/wa1.jpg),url(../media/img/wa4.jpg),url(../media/img/wa5.jpg);*/
}
h1 {
color: #FFFFFF;
font-family: "NEON CLUB MUSIC", "aspace", "MOONBEAM";
text-align: center;
}
h2,
h3,
h4,
h5,
h6 {
color: #FFFFFF;
font-family: "GOOD TIMES", "aspace", "MOONBEAM";
text-align: center;
letter-spacing: 2em;
}
a {
text-decoration: none;
color: #ffffff;
}
button,
input[type=submit],
input[type=reset] {
outline: none;
text-align: center;
padding-top: 5px;
font-family: "Good Times";
font-size: 17px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
background: rgba(0, 0, 0, .6);
border: 1px solid rgba(255, 255, 255, 0.5);
color: #ffffff;
border-radius: 0.2em;
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
box-shadow: .05em .05em .3em #ffffff;
text-shadow: 0.1em 0.1em 0.3em rgba(255, 255, 255, 0.5)
}
button:hover,
input[type=submit]:hover,
input[type=reset]:hover {
background: rgba(255, 255, 255, 1);
color: rgba(0, 0, 0, 1);
border-radius: 0.3em;
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
box-shadow: .25em .25em .5em #eeeeee;
cursor: pointer;
text-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 1);
}
input[type=button] {
width: 25px;
height: 25px;
outline: none;
transition: all 0.4s;
-webkit-transition: all 0.4s;
background: rgba(0, 0, 0, .6);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: .05em .05em .3em #ffffff;
}
input[type=button]:hover {
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 1);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
box-shadow: .25em .25em .5em #eeeeee;
cursor: pointer;
}
input[type=password],
input[type=file],
select,
option,
input[type=text],
input[type=search],
input[type=date],
input[type=number],
input[type=email],
textarea {
transition: all 0.5s;
-webkit-transition: all 0.5s;
outline: none;
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(255, 255, 255, 0.7);
color: #ffffff;
padding: 2px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
input[type=password]:focus,
input[type=file]:focus,
select:focus,
option:focus,
input[type=text]:focus,
input[type=date]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=email]:focus,
textarea:focus {
border: 1px solid #ffffff;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
input[type=password]::-webkit-input-placeholder,
input[type=file]::-webkit-input-placeholder,
select::-webkit-input-placeholder,
option::-webkit-input-placeholder,
input[type=text]::-webkit-input-placeholder,
input[type=date]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=search]::-webkit-input-placeholder {
color: rgba(50, 50, 50, 0.9);
text-shadow: none;
-webkit-text-fill-color: initial;
}
option: {
background: #ffffff;
color: rgba(0, 0, 0, .6)
}
table {
border-spacing: 0.5em;
display: table;
border-collapse: collapse;
border-color: #ffffff;
padding: 0.3em;
empty-cells: hide;
table-layout: auto;
width: 100%;
overflow: auto;
font-weight: normal;
text-align: left;
}
table th,
table td {
border: 1px solid #ffffff;
padding: 0.3em;
height: 1em;
overflow: auto;
font-weight: normal;
}
table .alt td {} #title {
position: relative;
text-align: center;
z-index: 5;
margin-top: 4em;
background: transparent;
}
#menubar {
left: 0;
right: 0;
position: fixed;
background: rgba(0, 0, 0, .8);
z-index: 10;
top: 0;
height: 3em;
vertical-align: middle;
line-height: 3em;
overflow: auto;
box-shadow: 0 .1em .9em #000000;
}
.mb {
margin: 0;
list-style-type: none;
font-family: "Good Times", "Arial";
vertical-align: middle;
}
.mb li {
display: inline;
-webkit-transition: all 0.7s;
transition: all 0.7s;
height: 100%;
padding-left: 1em;
padding-right: 1em;
float: left;
vertical-align: middle;
}
.mb li:hover {
background: rgba(255, 255, 255, 0.97) !important;
color: #000000 !important;
}
.dropdown {
z-index: 11;
/*border-radius:0.2em;
-webkit-border-radius:0.2em;
-moz-border-radius:0.2em;*/
background: rgba(255, 255, 255, 0.92);
display: none;
padding: 0.2em;
padding-left: 0.3em;
padding-top: 0.3em;
font-size: 1.2em;
background-clip: border-box;
text-align: left;
overflow: auto;
}
.dropdown a {
background-clip: border-box;
padding: 0 0;
}
.dropdown a:hover {
/*text-shadow: 0.5em 0.5em 1em #000000;*/
/*font-size:1.05em;*/
font-weight: bold;
}
#profil {
float: right;
}
.prlxcntr {
position: absolute;
top: 0;
margin: 0;
padding: 0;
}
#main {
background: rgba(0, 0, 0, 0);
color: #ffffff;
padding: 1px;
position: relative;
display: block;
border-top: 1px solid #ffffff;
width: 100%;
left: 0;
right: 0;
text-align: center;
margin: 0 auto;
z-index: 5;
}
#main h2 {
color: #ffffff;
font-family: "GOOD TIMES";
}
.text {
text-align: justify;
padding: 1em;
font-size: 1.3em;
}
#footer {
bottom: 0;
position: fixed;
background: rgba(0, 0, 0, .8);
left: 0;
right: 0;
text-align: center;
color: #ffffff;
padding: 0.2em;
overflow: auto;
z-index: 10;
}
.ddp {
color: rgba(0, 0, 0, 1);
}
.mainNav {
overflow: auto;
width: 98%;
}
.mainNav ul {
list-style-type: none;
}
.mainNav ul li {
display: inline;
transition: all 0.0s;
-webkit-transition: all 0.0s;
}
.mainNav ul li:hover {
display: inline;
border-bottom: 1px solid #ffffff;
cursor: pointer;
}
.div[id^="woerterliste"] {
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
width: 100%;
background: red;
}
#menubar2 {
left: 0;
right: 0;
position: fixed;
background: rgba(255, 255, 255, .8);
z-index: 9;
top: 3em;
height: 3em;
vertical-align: middle;
line-height: 3em;
overflow: auto;
color: #000000;
box-shadow: 0 .1em .9em #000000;
}
.mb2 {
margin: 0;
list-style-type: none;
font-family: "Good Times", "Arial";
vertical-align: middle;
color: #000000;
}
.mb2 li {
display: inline;
-webkit-transition: all 0.7s;
transition: all 0.7s;
height: 100%;
float: left;
padding-left: 1em;
padding-right: 1em;
vertical-align: middle;
color: #000000;
}
.mb2 li:hover {
cursor: pointer;
background: rgba(0, 0, 0, 0.97) !important;
color: #ffffff !important;
}
.ueberschrift {
font-family: Ethnocentric;
text-shadow: .1em .1em .5em #000000;
}
<!DOCTYPE html>
<html lang="ch_DE">
<head>
<title>My Site</title>
<meta charset="UTF-16" />
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
<link rel="stylesheet" type="text/css" href="css/universal.css"></link>
<link rel="stylesheet" type="text/css" href="css/idsAndClasses.css"></link>
<link rel="icon" href="media/img/logo.png" type="image/x-icon"></link>
<!--<script src="js/bootstrap.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/scrollmagic/minified/ScrollMagic.min.js"></script>
<script type='text/javascript' src='js/jquery.marquee.min.js'></script>
<script src="js/bitballoon.js"></script>
<script src="js/forms.js"></script>
<script src="js/client.js"></script>
<script src="js/functions.js"></script>
<!--<script src="js/styleManagement.js"></script>-->
<script src="js/clientManagement.js"></script>
<script src="js/parallax.js"></script>
<script>
$(document).on('beforeunload', function() {
$(document).scrollTop(0);
});
</script>
</head>
<body background="media/img/wa2.jpg" onload="scrollToTop()">
<!--<div class="prlxcntr" data-parallax="scroll" data-position="top" data-bleed="10" data-image-src="media/img/doubleNebula.jpg" data-natural-width="1400" data-natural-height="900">-->
<!-- http://i.imgur.com/kJiOdp8.jpg -->
<nav id="menubar">
<ul class="mb">
<a href="index.html" title="Home">
<li id="home">Home
</li>
</a>
<a href="#physik" onclick="physikClick()" title="Physik">
<li id="physik">Physik ▼
</li>
</a>
<a href="#mathematik" onclick="mathematikClick()" title="Mathematik">
<li id="mathematik">Mathematik ▼
</li>
</a>
<a href="#chemie" onclick="chemieClick()" title="Chemie">
<li id="chemie">Chemie ▼
</li>
</a>
<a href="#latein" onclick="lateinClick()" title="Latein">
<li id="latein">Latein ▼
</li>
</a>
<a href="#info" onclick="infoClick()" title="Info">
<li id="info">Info ▼
</li>
</a>
<a href="#profil" onclick="profilClick()" title="Profil">
<li id="profil">Profil ▼
</li>
</a>
</ul>
</nav>
<div class="parallax-window" id="title">
<h1 style="letter-spacing: 2em;" title='"Insert Easter Egg here."'>My Site</h1>
</div>
<!-- DROP DOWN DIV CONTAINERS -->
<div id="physikDD" class="dropdown"><a class="ddp" href="doc/physik/startseite.html">Theorie
</a>
<br /><a class="ddp" href="#formellehre">Formellehre
</a>
<br /><a class="ddp" href="#uebungen">Übungen
</a>
</div>
<div id="mathematikDD" class="dropdown"><a class="ddp" href="#theorie">Theorie
</a>
<br /><a class="ddp" href="#formellehre">Formellehre
</a>
<br /><a class="ddp" href="#uebungen">Übungen
</a>
</div>
<div id="chemieDD" class="dropdown"><a class="ddp" href="#theorie">Theorie
</a>
<br /><a class="ddp" href="#uebungen">Übungen
</a>
</div>
<div id="infoDD" class="dropdown"><a class="ddp" href="#agenda">Agenda
</a>
<br /><a class="ddp" href="doc/info/kontakt.html">Kontakt
</a>
<br /><a class="ddp" href="#ueber">Über
</a>
</div>
<div id="lateinDD" class="dropdown"><a class="ddp" href="#grammatik">Grammatik
</a>
<br /><a class="ddp" href="doc/latein/woerter.html">Wörter
</a>
</div>
<div id="profilDD" class="dropdown">
<!--<span id="profilName" style="color:white;text-decoration:underline;">Profil:</span><br />
Anmelden<br />Registrieren
--><b style="color: #ff7777;">IN ARBEIT</b>
</div>
<!-- MAIN DIV CONTAINER -->
<section class="text">
<h4 id="agenda">Debug Text</h4>
</section>
<!-- FOOTER DIV CONTAINER -->
<!--</div>-->
</body>
</html>
Do you know why this won't work with a mobile device?