i have images from SQL, and i cant get them to show in lightbox2 when they are clicked on, in IE, i can in Chrome and FF. i can load all the images when i try Chrome, and FF, and mobile and tablets can show it, no problem there, only in IE there is a problem,
Do any one have an idea what can be the problem?
<!-- Lightbox -->
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<ItemTemplate>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center PackShots">
<a href="<%# Eval("ImageURL") %>" data-lightbox="<%# Eval("CollectionsName") %>" title="Collection: <%# Eval("CollectionsName") %> | Style No. <%# Eval("StyleNo") %>">
<asp:Image ID="Image1" ImageUrl='<%# Eval("ImageURL") %>' runat="server" alt='<%# Eval("Name") %>' /></a>
<p class="poppins">Collection: <%# Eval("CollectionsName") %></p>
<p class="poppins">Style No. <%# Eval("StyleNo") %> </p>
</div >
Related
I want to build a menu with a dropdown selection, using Semantic UI.
It works great on desktop, because it seems to be predicated on hovering.
However, on mobile, given there is no hover, I can't get it to drop down.
How do I get it to work based on clicking, not just hovering?
<!DOCTYPE html>
<html>
<head>
<title>Puzzles</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=yes">
<link rel="stylesheet" type="text/css" href="CSS.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
<body>
<div class="ui menu">
<div class="header item">Puzzles</div>
<div class="right menu">
<div class="ui simple dropdown item">
<div class="text">Unsolved Puzzles</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Puzzle 1</div>
<div class="item">Puzzle 2</div>
<div class="item">Puzzle 3</div>
</div>
</div>
</div>
</div>
</body>
</html>
You need to initialize the dropdown with $('.ui.dropdown').dropdown();
fiddle: https://jsfiddle.net/L63u25ja/
I built an online interview. The form uses Angular.js and Bootstrap to display questions and answers. Each answer is attached to a point value that gets summed and totaled at the end for a test score.
The application works wonderfully on Chrome and Safari (both desktop apps), and in Chrome Dev Tools, it simulates well on a multitude of mobile screens. However, when I view the app on an actual mobile device, I am unable to select an answer among the radio buttons. What can I do to debug?
Is Angular.js likely the cause? Perhaps this is a known problem with Bootstrap? How do I troubleshoot and repair?
Live Site (works on desktop currently (April 7,2016), but not on mobile):
http://libertas-security466.info/interview
test.html (Template for each question/answer set)
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>{{question.text}}</h1>
<p ng-show="question.subtext">{{question.subtext}}</p>
</div>
<div class="col-sm-12">
<p>Remaining Questions: {{questionsLeft}}</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<form class="form">
<div class="form-group">
<div class="input-group" ng-repeat="answer in question.answers">
<div class="input-group-addon">
<input type="radio" name="radioGroup" ng-model="selectedAnswer" value="{{answer.text}}" ng-click="setCurrentAnswer(answer)">
</div>
<label class="form-control">
{{answer.text}}
</label>
</div>
</div>
</form>
</div>
<div class="col-xs-12"> </div>
<div class="col-sm-3 col-sm-offset-9 text-center">
<button ng-click="answer(currentAnswer)" class="btn btn-large btn-primary">Select Answer</button>
</div>
</div>
</div>
index.html
<!DOCTYPE html>
<html ng-app="FreemasonTest">
<head>
<title>Are you ready?</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="lib/jquery-ui-1.11.4/jquery-ui.min.css" type="text/css" />
<link rel="stylesheet" href="lib/bootstrap-3.3.6-dist/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="lib/jquery/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.11.4/jquery-ui.min.js" ></script>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js" type="text/javascript"></script>
<script type="text/javascript" src="javascript/routes.js"></script>
</head>
<body>
<script type="text/javascript" src="javascript/model/AssessmentModel.js"></script>
<script type="text/javascript" src="javascript/questions.js"></script>
<script type="text/javascript" src="javascript/needs.js"></script>
<script type="text/javascript" src="javascript/controllers/TestController.js"></script>
<script type="text/javascript" src="javascript/controllers/ResultsController.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Libertas-Security Lodge #466</a>
</div>
</div>
</nav>
<div ng-view></div>
</body>
</html>
#KieranDotCo provided the direction I needed. The solution to this problem comes in two parts:
How do I trouble shoot?
What is wrong?
== Troubleshooting ==
The instructions found at developers.google.com/web/tools/chrome-devtools/debug/… provided everything I needed to find and track down the solution.
== Making the App Work ==
The problem was not with Angular.js. Neither was it technically with Bootstrap, but the Bootstrap CSS was causing the problem.
I let the default column definition define the button div for the XS screen dimensions. In the Chrome debugger (image below), we will see that the <div> that contained the <button> element to select an answer, had dimensions that placed it above my radio buttons. This means that every time I tried to click a radio button, the blank space surrounding the "Select Answer" button was grabbing my event and bubbling it around the radio buttons to the body element that lay behind them.
In the above image, we see that when we select the <div> element which should cover the button and only the button that we have a highlighted area that expands in front of the radio buttons.
The answer to the problem lay in changing the class of this div to specify behavior for XS screens. After I add "col-xs-12" to the button div, the div no longer sits in front of the radio buttons and I can select options as I need to.
In the above image, we highlight the <div> as before, but now we see that the div is not bigger than the line that holds the <button>. The "col-xs-12" class 'fixed' the <div> dimensions and thus the app.
== Thank You ==
Big thank you to #KieranDotCo for teaching me about this great feature of Google Chrome's desktop application. You have opened a whole new world of debugging for me!
I'm trying to use Angular JS with Laravel 4.2. I've changed the blade's default {{}} into [[]], it works perfectly, now the problem is that when I puts Angular JS code in main layout (view) it works but when I put Angular JS code in a child view(actually child view extends the main layout and section is yielded using #section('contents') ...Angular JS code... #stop) it doesn't work at all, browser can't render the Angular JS exprerssion and shows it as it is in code editor! Here is my "main layout.blade.php" and "child.blade.php":
"main.layout.blade.php"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Customer Management</title>
<!-- Bootstrap -->
[[ HTML::style('css/bootstrap.min.css') ]]
[[ HTML::style('css/custom.css') ]]
[[--angular js files--]]
[[HTML::script('/js/angular/angular.min.js')]]
[[HTML::script('/js/controllers.js')]]
[[--jquery bootsrtap js files--]]
[[ HTML::script('js/respond.js') ]]
[[ HTML::script('js/jquery-1.11.2.min.js') ]]
[[ HTML::script('js/bootstrap.min.js') ]]
</head>
<body>
#include('layouts.main-menu')
<div class="container" id="container">
<div ng-app=""><!-- This Angular JS works fine -->
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
#yield('content')
</div>
#include('layouts.footer')
<script>
$("nav ul li").on("click", function() {
$("nav ul li").removeClass("active");
$(this).addClass("active");
});
</script>
</body>
</html>
Child.blade.php
#extends('layouts.main')
<!doctype html ng-app="myApp">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
#section('content')
<div ng-app=""><!-- This Angular JS doesn't work fine -->
<p>Name : <input type="text" ng-model="name1"></p>
<h1>Hello {{name1}} </h1>
</div>
#stop
</body>
</html>
You can see clearly that same Angular Code snippet is used in both files but in "layout.main.blade.php" it works and in "child.blade.php" it doesn't work as it is in between #section('content') ... #stop I can't get understand why this is and how to solve it!!!!!!
This is the response from network panel:
GET localhost:8000
200 OK
localhost:8000
3.4 KB
[::1]:8000
141ms
HeadersResponseHTMLCacheCookies
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Customer Management</title>
<!-- Bootstrap -->
<link media="all" type="text/css" rel="stylesheet" href="http://localhost:8000/css/bootstrap.min
.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost:8000/css/custom.css">
<script src="http://localhost:8000/js/angular/angular.min.js"></script>
<script src="http://localhost:8000/js/controllers.js"></script>
<script src="http://localhost:8000/js/respond.js"></script>
<script src="http://localhost:8000/js/jquery-1.11.2.min.js"></script>
<script src="http://localhost:8000/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"
>
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-arrow-down"></span>
MENU
</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/" ><span class="glyphicon
glyphicon-home"></span> Home</a></li>
<!--<li class="dropdown"><a href="#" data-toggle="dropdown">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Dr. Winthrop</li>
<li>Dr. Chase</li>
<li>Dr. Sanders</li>
</ul>
</li>-->
<li><span class="glyphicon glyphicon-edit"></span> Make CV</li
>
<li><span class="glyphicon glyphicon-eye-open"></span> Example</li>
<li><span class="glyphicon glyphicon-info-sign"></span> About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign in</li
>
<li>Sign Up</li>
</ul>
</div>
</nav>
</div>
<div class="container" id="container">
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
<div ng-app="">
<p>Name : <input type="text" ng-model="name1"></p>
<h1>Hello {{name1}} </h1>
</div>
</div>
<footer class="footer row ">
<div class="col-lg-4 col-sm-4 col-md-4" id="links">
<h4>Links</h4>
<ul class="list-unstyled">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</footer>
<script>
$("nav ul li").on("click", function() {
$("nav ul li").removeClass("active");
$(this).addClass("active");
});
</script>
</body>
</html>
1 request
3.4 KB
141ms (onload: 1.06s)
I'm not a blade user so I can't tell you exactly how to fix this. I do use PHP but I use Eloquent (the ORM part of Laravel) and use Slim for doing the server side routing. I believe it's best to write your HTML simply as HTML, use $http (basically the same as $.ajax) to get your data into the client code but write them as totally separate code bases. This will afford you a lot more flexibility and greatly simplify the task of debugging since you aren't trying to figure out issues between the server and client simultaneously. You can test the server in isolation using curl or POSTMan and then can separately build/test the client using mock objects or real requests to your server side component.
On the client side of things what you show being output has quite a few problems though, multiple html tags (should be 1 for the document) multiple ng-app (same, 1 for the page typically on the html or body tag).
For bootstrap use ui-bootstrap, you need the regular bootstrap.css file and the ui-bootstrap-tpls.js file but not bootstrap.js.
Where you have the jQuery to bind to a click event on some elements you should be using an ng-click directive in the markup instead, also can use ng-class to conditionally add/remove a class to an element based on the state of a model.
It seems like you have an understanding of roughly how to use all these things but you need to clearly separate things and stop using jQuery for a while to get used to how to do things with Angular properly. If you try to use jQuery outside of directives or tests with Angular you're typically doing something wrong. For details see "Thinking in AngularJS" if I have a jQuery background?
I am new to semantic UI. I am trying to include the built in classes of semantic UI to my code. Semantic folder is containing so many built in classes.
1 . How do I find to which css file, my class is going to be associated?
2. In some of the examples, I see class names like - div class="ui large blue icon button" . In such cases how do I find these variations like blue,floated?
<html>
<head>
<link rel="stylesheet" href="../SemanticUI/semantic/packaged/css/semantic.css"/>
<link rel="stylesheet" href="../SemanticUI/semantic/packaged/css/semantic.min.css"/>
<link rel="stylesheet" href="../SemanticUI/semantic/less/elements/button.less"/>
</head>
<body>
<div class="ui labeled icon button">
Download <i class="download icon"></i>
</div>
<div class="ui icon button">
<i class="download icon"></i>
</div>
<div class="ui button">
Download
</div>
<div class="ui facebook button">
<i class="facebook icon"></i>
Facebook
</div>
</body>
</html>
Thanks,
Sabari
You need to add the css and the javascript libraries for semantic-ui.
Here try this example:
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.12.0/css/semantic.min.css"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.12.0/javascript/semantic.min.js"></script>
</head>
<body>
<div class="ui labeled icon button">
Download <i class="download icon"></i>
</div>
<div class="ui icon button">
<i class="download icon"></i>
</div>
<div class="ui button">
Download
</div>
<div class="ui facebook button">
<i class="facebook icon"></i>
Facebook
</div>
</body>
</html>
Here is a jsbin POC: http://jsbin.com/ubiReqa/1/
Hope it helps.
Cheers,
Praney
I am using xcode and phonegap for mobile development.When i run the application with simulator,it does not apply any stylesheet. Please let me know how to get rid of this issue.
Here is the index.html Page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1 user-scalable=no,width = 320" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<link rel="stylesheet" type="text/css" href="jqtouch.css" />
<link href="theme.css" rel="stylesheet" type="text/css" />
<script src="Jquery.1.6.1.js" type="text/javascript"></script>
<script src="phonegap.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jqtouch.js"></script>
<script type="text/javascript">
var jQT = new $.jQTouch({});
</script>
</head>
<body >
<div id="jqt">
<div id="home">
<div class="toolbar">
<h1>
NIAID</h1>
</div>
<ul class="edgetoedge">
<li class="arrow">Search Users</li>
</ul>
</div>
<div id="get">
<div class="toolbar">
<h1>
NED - Search Users</h1>
</div>
<div class="info">
<center>
<table>
<tr>
<td>
First Name :
<input type="text" id="txtFirstName" />
</td>
</tr>
<tr>
<td>
Last Name :
<input type="text" id="txtLastName" />
</td>
</tr>
<tr>
<td>
<input type="button" id="btnSearch" value="Search" />
</td>
</tr>
</table>
</center>
</div>
<ul class="edgetoedge" id="search-results">
<li class="sep">Results</li>
</ul>
<ul id="placeholder" class="edgetoedge">
</ul>
<div class="toolbar">
<a class="back" href="#" onclick="ClearContents()">Back</a></div>
</div>
<div id="Details" style="display: none">
<div class="toolbar">
<h1>
User Details</h1>
</div>
<div class="info">
<div id="result">
</div>
</div>
<div class="toolbar">
<a class="current" href="#" onclick="jQT.goBack();">Back to results</a></div>
</div>
</div>
</body>
</html>
Please let me know what am doing wrong here.
Thanks,
Vishnu
I can't be sure why no css is being applied but the check the following
are you sure you have the right path to css and js files? for js it seems that one js file is under scripts and the other in the same folder as index, the css also seems to be in the same folder - check if that may be your problem. I'm not even sure the the scripts leads to the right path - you can try ./scripts/file
you have 2 viewports meta tags, I'm quite sure this is a mistake. they also partly contradict each other. so probably the browser would override the first one with the second one
to make sure you don't use phonegap api before the device is loaded. best practice to load the page js (besides the libraries) after the devices fires the deviceready event. like this example:
$(document).ready(function(){
document.addEventListener('deviceready',function(){
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "./path/to/yourjsscript.js";//change to fit the path
document.getElementsByTagName('body')[0].appendChild(script);
},false);
});
</script>