I am developing and app Using Telerik using Cordova and Kendo UI.
I am having the problem that if I scroll down in a div an then switched to div using a simple display:none on the current scrolled div and a display:block to the new div I want to see that the whole app stays scrolled down and I am having no option for scrolling up I have just got a empty screen.
Here the code I am using:
<body onload="onDeviceReady();logint();">
<div id="tabstrip-home"
data-role="view"
data-title="Login"
data-model="app.loginService.viewModel">
<div id="startupForm" data-role="view" style="display:block;">
<img id="startup" class="startup" src="styles/images/startup.jpg"/>
<input id="closeStartButton" onclick="closeStart();" type="image" src="styles/images/vor.png" name="image" width="40" height="40" style="bottom:0;position:fixed;right:0;">
</div>
<div class="logo-image" id="top" name="top"></div>
<div id="home" data-role="scroller" style="display:none;">
<div id="homeOverview" style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;">
<h3 style="padding-top:5px;">Angemeldet als: <span id="user"></span></h3>
<div id="statsNr" style="display:none;">
<h3 >Zählwerke gesamt: <span id="zaehler"></span></h3>
<h3 style="padding-bottom:5px;">Zählwerke erfasst: <span id="zaehlererfasst"></span></h3>
</div>
</div>
<div id="auftragGeladenUndDa">
<div style="margin-left:10px;">
<button data-role="button" data-bind="click: showTermine" style="height: 50px;width: 30%; padding-top: 0.75em; text-align: center;">
Termine
</button>
<button data-role="button" data-bind="click: schhin" style="height: 50px;width: 30%; padding-top: 0.75em; text-align: center;">
Schlüsselliste
</button>
<button data-role="button" data-bind="click: showStats" style="height: 50px;width: 30%; padding-top: 0.75em; text-align: center;">
Statistik
</button>
<button data-role="button" onclick="test();" data-bind="click: showAbles" style="height: 50px;width: 61%; padding-top: 0.75em; text-align: center;">
Erfassen
</button>
<button id="homeErfass" data-bind="click: showUpload" data-role="button" style="height: 50px;width: 30%; padding-top: 0.75em; text-align: center;">
Ergebnisse übermitteln
</button>
</div>
</div>
<div id="auftragNichtDa">
<button id="auftrag" onclick="kAuftragLaden();" data-bind="click: geladen" data-role="button" style="width: 90%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">
Neuen Auftrag laden
</button>
</div>
</div>
<div id="hinweiseForm" style="display:none;">
<h3 id="row" style="color:black;">Hinweis und Schlüsselliste</h3>
<table id="hinweis" border="0" style="z-index: 1;background-color:white;margin-left: 10px;margin-right: 10px;margin-bottom:5%;">
<tr>
</tr>
</table>
</div>
<div id="terminForm" data-role="view" style="display:none;">
<h3 id="row" style="color:black;">Termine</h3>
<div style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;">
<p>Keine Termine vorhanden</p>
</div>
</div>
<div id="uploadForm" data-role="view" style="display:none;">
<h3 id="row" style="color:black;">Ergebnisse übermitteln</h3>
<div id="uploadEinheit" style="background-color: rgba(255,255,255,0.5);padding-top:5px;padding-bottom:3px;margin-bottom:3px;margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;">
<input id="theCheckbox" type="checkbox">
</div>
</div>
<div id="statsForm" style="display:none;" >
<div style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;">
<h3 id="row" style="padding-top:5px;">Statistik</h3>
<h3 >Zählwerke gesamt: <span id="zaehlerin"></span></h3>
<h3 style="padding-bottom:5px;">Zählwerke erfasst: <span id="zaehlererfasstin"></span></h3>
</div>
<div style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;padding-top: 10px;">
<ul data-role="listview" data-style="inset" >
<li><div style="color:black;">Ort:</div>
<label>
<select style="color:black;" onchange="onchangeOrt();" id="statOrt"></select>
</label>
</li>
</ul>
<ul data-role="listview" data-style="inset" >
<li>
<div style="color:black;">Strasse</div>
<label>
<select style="color:black;" onchange="onchangeStrasse();" id="statOrt"></select>
</label>
</li>
</ul>
</div>
<div id="savedStrasse"></div>
</div>
<div id="ablesForm" style="display:none;" >
<ul data-role="listview" data-style="inset">
<h3 id="row" style="color:black;margin-bottom: 0;margin-top: 0;">Orte</h3>
<li>
<input id="stift" type="image" src="styles/images/erfassen.png" name="image" width="40" height="40" style="">
<input type="image" src="styles/images/suchen.png" name="image" width="40" height="40" style="">
<input type="image" src="styles/images/foto.png" name="image" width="40" height="40" style="">
<input type="image" src="styles/images/karte.png" name="image" width="40" height="40" style="">
</li>
<li>
<select id="recog" onchange="changeFunc();" style="color:black;left: 0;width: 200px;"> </select>
<select id="2tab" onchange="changeAnz2();" style="margin-right:60px;color:black"><option value="1">K</option><option value="2">Z</option></select>
<select id="alleOffen" onchange="changeAnz2();" style="color:black;"><option value="1">Alle</option><option value="2">Offen</option></select>
</li>
</ul>
<div id="all1" style="font-size: 18pt;height:95%;background-color:white;margin-top: 0;margin-left:25px;margin-right:25px;box-shadow: 3px 3px 20px black;"></div>
<div id="all2" style="font-size: 18pt;height:95%;display:none;"></div>
<div id="all3" style="font-size: 18pt;height:95%;display:none;"></div>
<div id="all4" style="font-size: 18pt;height:95%;display:none;"></div>
</div>
<div id="erfassForm" style="display:none;" >
<div style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;padding-top: 1px;">
<h3 style="color:black;display:none;" id="erfassName"></h3>
<h3 style="color:black;" id="erfassNameAnz"></h3>
<h3 style="color:black;display:none;"id="zaehlerNr"></h3>
<h3 style="color:black;"id="adresse"></h3>
<h3 style="color:black;display:none;"id="erfassStrasse"></h3>
<h3 style="color:black;display:none;"id="erfassHausnr"></h3>
<h3 style="color:black;display:none;"id="zpunktID"></h3>
<h3 style="color:black;display:none;"id="zaehlerID"></h3>
<h3 style="color:black;display:none;" id="ablEin"></h3>
<h3 style="color:black;display:none;" id="gerNR"></h3>
<h3 style="color:black;display:none;" id="AbleserNR"></h3>
<h3 style="color:black;"id="standMin" ></h3>
<h3 style="color:black;"id="standMax" ></h3>
<h3 style="color:black;display:none;" id="plasib"></h3>
<h3 style="color:black;display:none;" id="rebuild"></h3>
<select id="alleOrte" style="color:black;width: 45%;"></select>
<select id="alleAbleser" style="color:black;width: 45%; margin-left:20px;"></select>
<h3 style="color:black;margin-bottom: 0;">Zustandsmeldung</h3>
<select id="alleFehler" style="color:black;"></select>
<h3 style="color:black;margin-bottom: 0;">Aktueller Zählerstand</h3>
<input id="stand" type="stand" style="margin-left: 10px;"/>
<button data-click="reset" onclick="erfassenZae();" data-role="button" style="width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">
Erfassen
</button>
</div>
<br><br><br><br><br><br>
<div class="result-area ch50">
<div class="results">
<img style="display:none;margin:5px auto; width:120px; height:120px;" id="smallImage"/>
</div>
<div class="separator"></div>
</div>
</div>
<div id="settings" style="display:none;" >
<div id="adminMS" style="color:black;display:none;">Kennwort
<input id="adminPass" style="text-align:right;width: 150px;color: black;"/>
</div>
<div id="server" style="color:black;">
<p>Sie müssen beim ersten Start einen Server einrichten. Bitte machen Sie dies jetzt!</p>
<p id="infofield"></p>
<p id="os"></p>
<p id="version">2.0.0.6</p>
<div style="display:inline">
<p>Serveradresse:</p>
<input type="text" id="eingabe" style="width: 80%; margin-left: 5px;"/><br>
<button onclick="serverSpeichern();" id="serverTres" data-role="button" style="width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">Speichern</button>
</div>
<p>Qualitätsstufe (in Prozent) <input type="text" id="qalID" style="width: 100px; margin-left: 5px;"/><br></p>
<button id="settingsCloseButton" onclick="closet();logint();qalSpeichern();" data-role="button" style="width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">Ok</button>
</div>
<button id="adminButton" onclick="showServer();" data-role="button" style="display:none;width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">Anmelden</button>
</div>
<form data-bind="events: { keyup: checkEnter }" id="logForm" style="background-color: white; padding-top: 1px;margin-left: 10px;margin-right: 10px;height:95%;box-shadow: 3px 3px black;">
<h3 data-bind="invisible: isLoggedIn" style="color:black;font-size:16pt;">Benutzeranmeldung</h3>
<ul data-role="listview" data-style="inset">
<li>
<div style="color:black;margin-left:5px;">Geräte gesamt:
<div style="width: 30%;border: 1px solid gray;height: 20px;display: inline-block;float: right;border-radius: 5px;background-color: white;"></div>
</div>
<label>
</label>
</li>
<li style="top:0;margin-left:5px;">
<div style="color:black;">Geräte abgelesen:
<div style="width: 30%;border: 1px solid gray;height: 20px;display: inline-block;float: right;border-radius: 5px;background-color: white;"></div>
</div>
<label>
</label>
</li>
<li><div style="color:black;margin-left:5px;height: 40px;">Ableser</div>
<label>
<select style="width: 30%;border: 1px solid gray;display: inline-block;float: right;border-radius: 5px;background-color: white;color:black;margin-right: 10px;" onchange="onchangeLogin();" id="Model" type="number" data-bind="value: username"> </select>
</label>
</li>
<li>
<div style="color:black;margin-left:5px;margin-top: 5px;">Kennwort</div>
<label>
<input id="passInput" onkeyup="disableButton();" onclick="cleart();" style="text-align:right;width: 30%;border: 1px solid gray;height: 20px;display: inline-block;float: right;border-radius: 5px;background-color: white;color:black;margin-right: 10px;" type="password" data-bind="value: password"/>
</label>
</li><br>
<li><button id="login" type="submit" data-role="button" data-bind="click: onLogin" value="Login" class="login-button" style="-webkit-border-radius: 5px;background-color: rgba(200,200,200,1.0);box-shadow: 3px 3px black;color:black;float:right;width:30%;">weiter</button></li>
</ul>
<!--<button onclick="settings();serverAnzeigen();" data-role="button" style="width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">Einstellungen</button>
--><br>
</form>
</div>
<input onclick="openStart();" type="image" src="styles/images/zurueck.png" style="display:none;"name="image" width="40" height="40">
<div data-role="layout" data-id="tabstrip-layout">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<div data-role="footer" >
<div id="footert" style="width: 100%;display:none;">
<input id="closeButton" onclick="showHome();" type="image" src="styles/images/zurueck.png" name="image" width="40" height="40" style="bottom:0;position:fixed;">
<input id="closeHome" onclick="logout();" type="image" src="styles/images/zurueck.png" name="image" width="40" height="40" style="bottom:0;position:fixed;">
<input id="uploadButton" onclick="uploadAll();" type="image" src="styles/images/uebermitteln.png" name="image" width="40" height="40" style="bottom:0;position:fixed;display:none;">
<!--<button id="closeButton" onclick="showHome();" data-click="reset" data-role="button" style="width: 40%; text-align: center;display:none;">Schließen</button>
<button id="erfassButton" data-click="reset" data-bind="click: showErfass" data-role="button" style="display:none; width: 40%; text-align: center;">Ablesen</button>
-->
<input id="settingsButton" onclick="settingsH();" type="image" src="styles/images/einstellungen.png" name="image" width="40" height="40" style="bottom:0;position:fixed;display:none;">
</div>
</div>
</div>
</body>
</html>
No I am for exmaple scrolling down in the div named hinweiseForm and then going back using the following function:
function showHome(){
document.getElementById("ablesForm").setAttribute("style","display:none;");
document.getElementById("hinweiseForm").setAttribute("style","display:none;");
document.getElementById("statsForm").setAttribute("style","display:none;");
document.getElementById("home").setAttribute("style","display:block;");
document.getElementById("erfassForm").setAttribute("style","display:none;");
document.getElementById("uploadForm").setAttribute("style","display:none;");
document.getElementById("terminForm").setAttribute("style","display:none;");
document.getElementById("closeHome").setAttribute("style","display:block;"); document.getElementById("footert").setAttribute("style","position:fixed;bottom:0px;width: 100%;display:block;");
document.getElementById("plasib").innerHTML="";
document.getElementById("closeButton").setAttribute("style","display:none;bottom:0;postion:fixed;");
document.getElementById("uploadButton").setAttribute("style","display:none;");
document.getElementById("settingsButton").setAttribute("style","display:block;bottom:0;margin-left:50px;position:fixed;");
document.getElementById("settings").setAttribute("style","display:none");
//$("#home").data("kendoMobileScroller").reset();
//new kendo.mobile.Application();
//app.application = new kendo.mobile.Application(document.body, { layout: "tabstrip-layout" });
}
I already tried some things like the reset function but either I am not using it right or I need to do it another way. It would be really awesome if you can help me.
Thanks in advance
I use the scrollTo method to scroll to the top of my views.
app.application = new kendo.mobile.Application(document.body, {
layout: "tabstrip-layout"
});
// get the view scroller
var scroller = app.application.view().scroller;
/*
* scroller.scrollTop = The number of pixels that are hidden from view above the
* scrollable area.
*/
if (scroller.scrollTop) {
scroller.scrollTo(0, 0);
}
Related
trying to call a javascript function from a PHP web request ( if statement )but it fails tried to check if another script will run and when a test echo'<sciprt>alert('Called Succeed')</script>'; it worked and I thought if I write the whole function in the web request code block well solve the problem but it didn't, so what I'm missing here? where is the bug?
Snippet:-
<?
include("..\include\basket-module.php");
// notifications //
include("..\\include\\notif-module.php");
// module //
include("..\\include\\Insert-module.php");
$count = $_POST['productscount']
?>
<html>
<head>
<title>Project - new Draft</title>
<meta charset="utf-8">
<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap4 Library and Font-awesome with Custom CSS -->
<link rel="stylesheet" type="text/css" href="..\Styles\profile.css">
<link rel="stylesheet" type="text/css" href="..\Styles\newdraft.css">
<link rel="stylesheet" type="text/css" href="..\Styles\newproduct.css">
<link rel="stylesheet" type="text/css" href="..\Styles\navegationbar.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap4 Library and Font-awesome with Custom CSS End-->
<!-- including custom javascript -->
<script src="..\js\functions\js.js"></script>
<script>
function myFunction(){
var formscount = <?php echo(json_encode($productscount)); ?>;
if (formscount > 0) {
active="";
for (i=0; i < formscount; i++) {
var str='active'
if (i > 0){
str = ''
}
$('#demo').append($('<div class="carousel-item '+str+'"> <div class="card product-form" style="border: solid 1px #86377b !important;"><div class="card-body"> <img src="..\\upload\\panadol.png" style="width:205px; height:205px;"> <div class="row justify-content-center"> <a name="img-upload-btn" id="img-btn" class="btn btn-primary btn-block" style="height:35px; background-color:#86377b !important;" href="#" role="button">إضافة صورة</a> </div> <hr /> <div class="card-text" style="font-family: hana; font-size:23px; color:black;"> <div class="row" style=" flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group product-name-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px; ">إسم المنتج</div> <input type="text" class="form-control product-name-input" style="direction:RTL; font-family:hana; border: solid 1px #86377b !important;" autocomplete="off" placeholder="إسم المنتج"> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group dosage-form-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">نوع العبوة</div> <select class="custom-select" onchange="yesnoCheck(this);" id="medictype" style="direction:RTL; font-family:hana; border: solid 1px #86377b !important;"> <option selected>نوع الدواء</option> <option value="1">أدوية</option><i class="fas fa-capsules"></i> <option value="2">مستلزمات الام والطفل</option> <option value="4">معدات طبية</option> <option value="4">بروتينات ومكملات غذائية</option> </select> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group productqty-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">الكمية</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="الكمية"></input> </div> </div> </div> <hr /> <div class="row" style="flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group stock-code-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">كود المنتج</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="الكود"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group chemicalcom-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">التركيبة الكيميائية</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="التركيبة الكيميائية"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group concentration-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">التركيز</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="تركيز الدواء"></input> </div> </div> </div> <hr /> <div class="row" style="flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group packsize-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">حجم العلبة</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="حجم العلبة"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group mandate-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">تاريخ الإنتاج</div> <input type="date" id="mandate_#" name="mandate1" class="mandate-input" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group expdate-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">تاريخ الإنتهاء</div> <input type="date" id="expdate_#" name="expdate1" class="expdate-input" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;"></input> </div> </div> </div> <div class="row" style="flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group sale-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">الخصم</div> <select class="custom-select" onchange="yesnoCheck(this);" id="medictype" style="direction:RTL; font-family:hana; border: solid 1px #86377b !important;"> <option selected>الخصم على المنتج</option> <option value="1">نعم</option><i class="fas fa-capsules"></i> <option value="2">لا</option> </select> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group discou-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">قيمة الخصم</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="قيمة مئوية"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group bounsfor-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">القطع المخصومة</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="على كل (10) قطع"></input> </div> </div> </div> <hr /> <center> <nav class="navbar counter justify-content-center" style="width:70vh; background-color:#86377b;"> <a class="navbar-brand" style="font-family:tahoma; font-size:28px; text-shadow:4px 4px rgba(0,0,0,1); color:white;">'+i+' / '+formscount+'</a> </nav> </center> </div></div></div></div>')); event.preventDefault()
}
}
}
</script>
<!-- Fontawseome Kit -->
<script src="https://kit.fontawesome.com/d75f59893e.js" crossorigin="anonymous"></script>
</head>
<body>
<?
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
echo '<script> myFunction(); </script>';
}
?>
<!-- Bootstrap Jquery JavaScripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><!-- Bootstrap Jquery JavaScripts -->
<!-- Bootstrap Jquery JavaScripts Ends -->
<!-- navegtion bar bootstrap 4 -->
<?php include("..\\home\\navbar.php"); ?>
<!-- basket sidebar -->
<?php include("..\\home\\basket.php"); ?>
<!-- Main Products Form -->
<center>
<div class="card justify-content-center cont">
<div class="card-body">
<div class="card-text">
<nav class="navbar header justify-content-center">
<a class="navbar-brand" style="font-family:hana; font-size:28px; text-shadow:4px 4px rgba(0,0,0,1); color:white;">إدخال المنتجات</a>
</nav>
<hr />
<center>
<div id="demo" class="carousel slide" data-interval="false" style="height:50vh;">
<!-- The slideshow -->
<div class="carousel-inner canner">
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev d-none d-md-block" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon grow" style="filter:invert(100%); height:50vh; position:relative; left:-4vh;"></span>
</a>
<a class="carousel-control-next d-none d-md-block" href="#demo" data-slide="next">
<span class="carousel-control-next-icon grow" style="filter:invert(100%); height:50vh; position:relative; right:-4vh;"></span>
</a>
</div>
</center>
</div>
</div>
</div>
</center>
</body>
</html>
I'm primarily a BI report developer and a complete JS/JQuery novice. I have a requirement to default one of the "dropdown/selector" values when the page loads. Unfortunately, there is no out of the box functionality that can set a default value in the tool (Microstrategy) that I am using.
Thus far, I have been able to default the text. However, there are events that are tied to values in the "dropdown/selector" that will refresh the other page elements. I have been unable to identify or trigger any event that will refresh these other page elements.
HTML snippet of the "dropdown/selector":
<div id="*lW97AC0343C8A843F7803C7F5C3705A2C7*kW03B8BE5F89014A668C84F3702E0B0B73*x1*t1587427161911" k="W03B8BE5F89014A668C84F3702E0B0B73" class="mstrmojo-DocSelector vi-DocSelector" nm="YearMonth (PSPI)" title="" style="vertical-align: top; text-align: left; color: rgb(0, 0, 0); font: bold 9pt Arial; display: block; height: 35px; width: 223px;">
<div class="filter" style="display: none;" />
<div class="wait" style="display:none;z-index:100;position:absolute;top:0;left:0;width:100%;height:100%" />
<div class="content" style="overflow-x: hidden; height: 35px; width: 223px;">
<div id="mstr559" style="text-align: left; font: bold 9pt Arial; color: rgb(0, 0, 0); display: block; height: 35px; width: 223px;" class="mstrmojo-ui-Pulldown mstrmojo-ui-SearchablePulldown" onmousedown="mstrmojo.dom.captureDomEvent('mstr559','mousedown', self, event)" onclick="mstrmojo.dom.captureDomEvent('mstr559','click', self, event)">
<div class="mstrmojo-ui-Pulldown-text hasEditableText" title="" style="">201911</div>
<div class="container">
<div id="mstr560" class="mstrmojo-PopupList ctrl-popup-list mstrmojo-scrollbar-host" style="display: none;" tabindex="-1" onclick="mstrmojo.dom.captureDomEvent('mstr560','click', self, event)" ondblclick="mstrmojo.dom.captureDomEvent('mstr560','dblclick', self, event)" onmouseover="mstrmojo.dom.captureDomEvent('mstr560','mouseover', self, event)" onmouseout="mstrmojo.dom.captureDomEvent('mstr560','mouseout', self, event)" oncontextmenu="mstrmojo.dom.captureDomEvent('mstr560','contextmenu', self, event)" onkeydown="mstrmojo.dom.captureDomEvent('mstr560','keydown', self, event)">
<div class="mstrmojo-popupList-scrollBar mstrmojo-scrollNode" style="overflow: hidden;">
<div class="" style="">
<div class="item " idx="0" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
202003
</div>
<div class="item " idx="1" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
202002
</div>
<div class="item " idx="2" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
202001
</div>
<div class="item " idx="3" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
201912
</div>
<div class="item " idx="4" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
201911
</div>
<div class="item selected" idx="5" style="font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
201910
</div>
<div class="item " idx="6" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
201909
</div>
<div class="item " idx="7" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
201908
</div>
<div class="item " idx="8" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
201907
</div>
<div class="item " idx="9" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
201906
</div>
<div class="item " idx="10" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
201905
</div>
<div class="item " idx="11" style="color: #000;font:bold 9pt 'Arial'" title="">
<span class="sp-highlight" />
201904
</div>
</div>
</div>
<div class="mstrmojo-scrolltrack vertical">
<div class="mstrmojo-scrollbar vertical" />
</div>
<div class="mstrmojo-scrolltrack horizontal">
<div class="mstrmojo-scrollbar horizontal" />
</div>
</div>
</div>
</div>
</div>
</div>
My /JQuery script:
<script>
var script = document.createElement('script');
script.src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.js";
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
$(document).ready(function(){
// works
$("div[k='W03B8BE5F89014A668C84F3702E0B0B73'] .mstrmojo-ui-Pulldown-text").text('201911');
// works
// $('div[k="W03B8BE5F89014A668C84F3702E0B0B73"] div[idx="0"]').addClass('selected');
// does not work
$('#mstr599.mstrmojo-ui-Pulldown.mstrmojo-ui-SearchablePulldown').trigger('onmousedown');
$('#mstr599.mstrmojo-ui-Pulldown.mstrmojo-ui-SearchablePulldown').trigger('onclick');
// there are 2 other events associated with the mstr599 element: mouseout and mouseover
});
</script>
What I am missing or doing wrong here?
This is related to my original Question, which was solved: JavaScript show/hide divs
So I have gone with Fadi's answer on the original question and it works perfectly. How would I be able to use two div's for the same data-collaboration category?
I want to have teams show up under "Collaborate Socially" and "Collaborate on Files" - the categories "project, files, socially" are all using the data-decision definition.
I've tried adding two data-decision="projects" data-decision="socially" in one div and it didn't work.
<div class="outer-container">
<div class="row">
<div class="col-md-4" style="text-align: center;">
<div data-collaborate="projects" class="decisionTreeBox collabProjects" style="font-size: x-large;">
Collaborate on Projects</div>
</div>
<div class="col-md-4" style="text-align: center;">
<div data-collaborate="files" class="decisionTreeBox collabFiles" style="font-size: x-large;">
Collaborate on Files</div>
</div>
<div class="col-md-4" style="text-align: center;">
<div data-collaborate="socially" class="decisionTreeBox collabSocially" style="font-size: x-large;">
Collaborate Socially</div>
</div>
</div>
<hr />
<div class="container" style="padding: 0px;">
<div class="row">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="files" id="decisionTreeOneDrive"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>OneDrive</h3></div>
</div></a>
<!-- <a href="/TrainingResourceCenter/O365Training/Pages/O365.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="projects" id="decisionTreeProject"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/Project.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Project</h3></div>
</div></a> -->
<a href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="files" id="decisionTreeSharePoint"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>SharePoint</h3></div>
</div></a>
<a href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="socially" id="decisionTreeTeams"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Teams</h3></div>
</div></a>
<a href="/TrainingResourceCenter/O365Training/Pages/Planner.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="projects" id="decisionTreePlanner"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/PlannerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Planner</h3></div>
</div></a>
<a href="/TrainingResourceCenter/O365Training/Pages/Yammer.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="socially" id="decisionTreeYammer"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/YammerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Yammer</h3></div>
</div></a>
</div>
</div>
</div>
<script>
function projectCollab(){
var divsToCange = document.querySelectorAll('[data-decision]'),
attr = this.getAttribute('data-collaborate');
for(var i = 0; i < divsToCange.length; i++){
var d = divsToCange[i];
if(d.getAttribute('data-decision') == attr) {
d.parentNode.style.display ='block' ;
}
else{
d.parentNode.style.display = 'none';
}
}
return false;
}
var divButtons = document.querySelectorAll('[data-collaborate]');
for(var i = 0; i < divButtons.length; i++){
divButtons[i].addEventListener('click', projectCollab);
}
</script>
This fix comes easy once you have started with data attributes
2 sides of the solution
HTML
You will be able to stack the values separated by a space
data-decision="socially files"
JS
For the HTML to work, we will change your if statement where you checked if the data attribute was the same as the once selected. Now we are going to validate if the data attribute includes the once selected.
This was your if statement
if(d.getAttribute('data-decision') == attr)
This is the new if statement
if (d.getAttribute('data-decision').includes(attr))
Hope this helps :>
function projectCollab() {
var divsToCange = document.querySelectorAll('[data-decision]'),
attr = this.getAttribute('data-collaborate');
for (var i = 0; i < divsToCange.length; i++) {
var d = divsToCange[i];
if (d.getAttribute('data-decision').includes(attr)) {
d.parentNode.style.display = 'block';
} else {
d.parentNode.style.display = 'none';
}
}
return false;
}
var divButtons = document.querySelectorAll('[data-collaborate]');
for (var i = 0; i < divButtons.length; i++) {
divButtons[i].addEventListener('click', projectCollab);
}
<div class="outer-container">
<div class="row">
<div class="col-md-4" style="text-align: center;">
<div data-collaborate="projects" class="decisionTreeBox collabProjects" style="font-size: x-large;">
Collaborate on Projects</div>
</div>
<div class="col-md-4" style="text-align: center;">
<div data-collaborate="files" class="decisionTreeBox collabFiles" style="font-size: x-large;">
Collaborate on Files</div>
</div>
<div class="col-md-4" style="text-align: center;">
<div data-collaborate="socially" class="decisionTreeBox collabSocially" style="font-size: x-large;">
Collaborate Socially</div>
</div>
</div>
<hr />
<div class="container" style="padding: 0px;">
<div class="row">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="files" id="decisionTreeOneDrive">
<h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />OneDrive</h3>
</div>
</div>
</a>
<!-- <a href="/TrainingResourceCenter/O365Training/Pages/O365.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="projects" id="decisionTreeProject"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/Project.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Project</h3></div>
</div></a> -->
<a href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">
<div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="files" id="decisionTreeSharePoint">
<h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />SharePoint</h3>
</div>
</div>
</a>
<a href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">
<div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="socially files" id="decisionTreeTeams">
<h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Teams</h3>
</div>
</div>
</a>
<a href="/TrainingResourceCenter/O365Training/Pages/Planner.aspx">
<div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="projects" id="decisionTreePlanner">
<h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/PlannerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Planner</h3>
</div>
</div>
</a>
<a href="/TrainingResourceCenter/O365Training/Pages/Yammer.aspx">
<div class="col-md-4 margin-bottom-20" style="text-align: center;">
<div data-decision="socially" id="decisionTreeYammer">
<h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/YammerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Yammer</h3>
</div>
</div>
</a>
</div>
</div>
</div>
<script>
</script>
Here is my code:
$('#hitung').click(function() {
var count = $('.item').length;
var locality = 'id-ID';
var luas = $('.tinggi' + count).val() * $('#lebar' + count).val();
console.log(luas);
var dayasebar = luas / 12.5 * 2;
var hasil = dayasebar / 2.5;
var harga = Math.ceil(hasil) * 120000;
var title = $('#title-temp').text();
var color = document.querySelector('input[name="color"]:checked').value;
var color_title = document.querySelector('input[name="color"]:checked ~ label h4').innerHTML;
$('#luas').html('<p>Luas: ' + luas + ' meter ²</p>');
$('#hasil').html('<p>' + Math.ceil(hasil) + ' Kaleng ' + Math.ceil(hasil) * 5 + ' Kg | Rp ' + harga.toLocaleString(locality, {}) + '</p>');
$('#color').html('<div class="row"><div class="col-xs-6 col-md-4" style="height: 50px; float: left; background-color: ' + color + '; display: block;text-align: center;"></div><div class="col-xs-6 col-md-8"><h4 style="text-transform: capitalize; font-weight: bold; margin-top:0">' + title + '</h4><p>' + color_title + '</p></div></div>');
$('.panel-footer').css('display', 'block');
});
$('#tambah').click(function() {
var count = $('.item').length;
var id = 'Item[' + count + ']';
var item = $('.item:first').clone();
// item.find('input:first').attr('id', id);
item.find('.tinggi' + count + ':first').attr('id', 'tinggi' + count);
item.find('#title:first').attr('for', id)
.html('Dinding ' + (1 + count));
item.appendTo('#fieldset');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="fieldset">
<div class="panel panel-default item" style="background-color: #f2f2f2;border-radius: 0;border: 0;">
<div class="panel-body">
<h3 id="title" style="text-transform: uppercase; font-weight: bold; text-decoration: underline; margin-bottom: 25px" class="text-center">Dinding 1</h3>
<form>
<div class="row text-left">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label style="font-style: italic; font-weight: normal; font-size: 20px">Tinggi</label>
<input type="text" id="tinggi1" name="tinggi" class="form-control new-input tinggi">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label style="font-style: italic; font-weight: normal; font-size: 20px">Lebar</label>
<input type="text" id="lebar1" name="lebar" class="form-control new-input">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label style="font-style: italic; font-weight: normal; font-size: 20px">Pilih Warna</label>
<div class="row">
<div class="col-md-12">
<div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
<div id="color-group1">
<input type="radio" name="color" id="color1" class="input-hidden" value="blue" data-name="Hello" style="visibility:hidden; display: none;" />
<label for="color1" style="display: block;">
<span style="width: 100%; background-color: blue; display: block;text-align: center;padding: 50px 0;">
<h4>Warna 1</h4>
</span>
</label>
</div>
</div>
<div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
<div id="color-group2">
<input type="radio" name="color" id="color2" class="input-hidden" value="lightblue" style="visibility:hidden; display: none;" />
<label for="color2" style="display: block;">
<span style="width: 100%; background-color: lightblue; display: block;text-align: center;padding: 50px 0;">
<h4>Warna 2</h4>
</span>
</label>
</div>
</div>
<div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
<div id="color-group3">
<input type="radio" name="color" id="color3" class="input-hidden" value="brown" style="visibility:hidden; display: none;" />
<label for="color3" style="display: block;">
<span style="width: 100%; background-color: brown; display: block;text-align: center;padding: 50px 0;">
<h4>Warna 3</h4>
</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="panel-footer quite-white-tip bg-pink text-white" style="display: none">
<h3 style="text-transform: uppercase; text-decoration: underline; font-weight: 600">Kebutuhan Cat Anda</h3><br>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="media">
<div class="row">
<div class="col-md-5">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-responsive" src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" alt="...">
</a>
</div>
</div>
<div class="col-md-7">
<div class="media-body text-left">
<div id="color" style="display: block; clear: both; width: 100%;"></div><br>
<div id="luas"></div>
<div id="hasil"></div>
<div id="title-temp" style="display: none;">Warna</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="button" id="tambah" class="btn btn-sm btn-link">Add</button><br>
<button type="button" id="hitung" class="btn btn-lg btn-success">COUNT</button>
<br><br>
When I press COUNT button, the code working fine, all the result placed well on where I want it to be shown. But I still missing one feature, append the item class. When I append or add or clone item class, the calculation is not working due to the id or name of each input are same. I tried using [] for the input but still don't know how to count it and place all the result each just like the original element.
$('#hitung').click(function() {
var count = $('.item').length;
var locality = 'id-ID';
var luas = $('#tinggi' + count).val() * $('#lebar' + count).val();
var dayasebar = luas / 12.5 * 2;
var hasil = dayasebar / 2.5;
var harga = Math.ceil(hasil) * 120000;
var title = $('#title-temp').text();
var color = $('input[name=color]').css('backgroundColor');
var color_title =$('input[name=color] ~ label h4').text();
$('#luas').html('<p>Luas: ' + luas + ' meter ²</p>');
$('#hasil').html('<p>' + Math.ceil(hasil) + ' Kaleng ' + Math.ceil(hasil) * 5 + ' Kg | Rp ' + harga.toLocaleString(locality, {}) + '</p>');
$('#color').html('<div class="row"><div class="col-xs-6 col-md-4" style="height: 50px; float: left; background-color: ' + color + '; display: block;text-align: center;"></div><div class="col-xs-6 col-md-8"><h4 style="text-transform: capitalize; font-weight: bold; margin-top:0">' + title + '</h4><p>' + color_title + '</p></div></div>');
$('.panel-footer').css('display', 'block');
});
$('#tambah').click(function() {
var count = $('.item').length;
var id = 'Item[' + count + ']';
var item = $('.item:first').clone();
// item.find('input:first').attr('id', id);
item.find('.tinggi' + count + ':first').attr('id', 'tinggi' + count);
item.find('#title:first').attr('for', id)
.html('Dinding ' + (1 + count));
item.appendTo('#fieldset');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="fieldset">
<div class="panel panel-default item" style="background-color: #f2f2f2;border-radius: 0;border: 0;">
<div class="panel-body">
<h3 id="title" style="text-transform: uppercase; font-weight: bold; text-decoration: underline; margin-bottom: 25px" class="text-center">Dinding 1</h3>
<form>
<div class="row text-left">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label style="font-style: italic; font-weight: normal; font-size: 20px">Tinggi</label>
<input type="text" id="tinggi1" name="tinggi" class="form-control new-input tinggi">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label style="font-style: italic; font-weight: normal; font-size: 20px">Lebar</label>
<input type="text" id="lebar1" name="lebar" class="form-control new-input">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label style="font-style: italic; font-weight: normal; font-size: 20px">Pilih Warna</label>
<div class="row">
<div class="col-md-12">
<div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
<div id="color-group1">
<input type="radio" name="color" id="color1" class="input-hidden" value="blue" data-name="Hello" style="visibility:hidden; display: none;" />
<label for="color1" style="display: block;">
<span style="width: 100%; background-color: blue; display: block;text-align: center;padding: 50px 0;">
<h4>Warna 1</h4>
</span>
</label>
</div>
</div>
<div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
<div id="color-group2">
<input type="radio" name="color" id="color2" class="input-hidden" value="lightblue" style="visibility:hidden; display: none;" />
<label for="color2" style="display: block;">
<span style="width: 100%; background-color: lightblue; display: block;text-align: center;padding: 50px 0;">
<h4>Warna 2</h4>
</span>
</label>
</div>
</div>
<div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;">
<div id="color-group3">
<input type="radio" name="color" id="color3" class="input-hidden" value="brown" style="visibility:hidden; display: none;" />
<label for="color3" style="display: block;">
<span style="width: 100%; background-color: brown; display: block;text-align: center;padding: 50px 0;">
<h4>Warna 3</h4>
</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="panel-footer quite-white-tip bg-pink text-white" style="display: none">
<h3 style="text-transform: uppercase; text-decoration: underline; font-weight: 600">Kebutuhan Cat Anda</h3><br>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="media">
<div class="row">
<div class="col-md-5">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-responsive" src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" alt="...">
</a>
</div>
</div>
<div class="col-md-7">
<div class="media-body text-left">
<div id="color" style="display: block; clear: both; width: 100%;"></div><br>
<div id="luas"></div>
<div id="hasil"></div>
<div id="title-temp" style="display: none;">Warna</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="button" id="tambah" class="btn btn-sm btn-link">Add</button><br>
<button type="button" id="hitung" class="btn btn-lg btn-success">COUNT</button>
<br><br>
I want to change background of div when i hover my link. How can i achieve this? Currently my code looks like this, but it is not working:
<div class="row">
<div class="col-md-12" style="margin-left: 40px; margin-top: 5px;">
<a id="test" href="">
<div id="test1" class="col-xs-2 button-left">
<img class="button-img" src="{{ asset('/img') }}"></img>
</div>
<div class="col-xs-5 button-right">
<h3 style="margin-top: 10px; text-align: center;">#lang('main.data')</h3>
</div>
</a>
</div>
#test:hover ~ #test1 {
display: none;
}
#test:hover>#test1 {
background: red;
}
<div class="row">
<div class="col-md-12" style="margin-left: 40px; margin-top: 5px;">
<a id="test" href="">
<div id="test1" class="col-xs-2 button-left">
<img class="button-img" src="{{ asset('/img') }}"></img>
</div>
<div class="col-xs-5 button-right">
<h3 style="margin-top: 10px; text-align: center;">#lang('main.data')</h3>
</div>
</a>
</div>
</div>