in my code(mootools) im trying to add a new li to the ul and the li contains a hyper link. I tried the below code:
var newLi = new Element('li#internet_sub', { html: '<a style="BACKGROUND-POSITION: 13px -34px" class="sec_net_1" href="javascript:void(0);" id="sec_net_hsi" >Internet</a>' });
and this also:
var newLi = new Element('li id="internet_sub"', { html: '<a style="BACKGROUND-POSITION: 13px -34px" class="sec_net_1" href="javascript:void(0);" id="sec_net_hsi" >Internet</a>' });
Both of them worked in IE but not in Fire fox.. When i removed adding id to li like below, it worked in Firefox also.
var newLi = new Element('li', { html: '<a style="BACKGROUND-POSITION: 13px -34px" class="sec_net_1" href="javascript:void(0);" id="sec_net_hsi" >Internet</a>' });
Please tell me how to add id to the new li and it should work inboth the browsers..
I added id at the end like how i added html.. and it worked. The solution is this:
var newLi = new Element('li', { html: '<a cat="tech" style="BACKGROUND-POSITION: 13px -34px" class="sec_net_1" href="javascript:void(0);" id="sec_net_hsi">Internet</a>', id: 'internet_sub' });
Related
<a class="btn2" onclick="alertbox()">link </a>
<script>
function alertbox() {
alert("alert box");
}
</script>
I have tried to use the css below to try and fix it but that does not make it clickable it only changes the cursor
.btn2 {
cursor: pointer;
}
but that only changes the cursor when i hover over it and dont make it actually clickable
sorry if really obvious answer only recently i started to do html
Add some text to <a> and it works:
.btn2 {
cursor: pointer;
}
<a class="btn2" onclick=alertbox();>Link</a>
<script>
function alertbox() {
alert("alert box")}
</script>
You are missing a > in the anchor tag
and a } at the end of your function
<a class="btn2" onclick=alertbox()>button </a>
<script> function alertbox() {
alert("alert box");
}
</script>
I am loading the HTML in a tab. After loading the HTML in a div. I am triggering the controller. when the controller is triggered I have the data in the controller. That data is not populating in the HTML view. Is there any suggestion on calling a controller or loading the data into HTML??
$('<div id = '+ createChannelTabId +'Properties'+ ' ng-controller="channelHomeCtrl" ng-bind="msg"> </div>').appendTo("#" + createChannelTabId);
$('body').injector().invoke(function ($compile, $rootScope) {
$compile($("#" + createChannelTabId + "Properties"))($rootScope);
$rootScope.$apply();
});
var modalFieldProperties = $("#" + createChannelTabId + "Properties");
modalFieldProperties.html(loadHTML("channelHome.html"));
$("#" + createChannelTabId + "Link")[0].click();
angular.bootstrap($("#" + createChannelTabId), ['ChannelModule']);
when the controller is called I am doing this inside the controller
MDChannelModule.controller('channelHomeCtrl', function ($scope,$http) {
debugger;
MDBPMUtils.showWaitCursor();
$scope.query = {};
$scope.queryBy = 'description';
$scope.items =
$http.get("/mondrestws/services/binData/getListOfBinDataHeaderWithAccessRights/",{params : {foreignKeyType:"channelJSon"} }).then(function(res){
debugger;
channelData = res.data;
if(res.data.length > 0){
document.getElementById("emptyDTImg").style.display = "none";
$scope.items = angular.fromJson(res.data);
}else{
$scope.items = {};
document.getElementById("emptyDTImg").style.display = "inline";
}
MDBPMUtils.showDefaultCursor();
},
function(data) {
MDBPMUtils.showMessage(data.status,data);
});
)}
even then the data is not loading in the HTML
<div ng-controller="channelHomeCtrl">
<div class="infobox infobox-green" id="{{i.binDataId}}" ng-click ="setSectedValue(i)" ng-style="{ 'width' : width}" style=" margin: 5px 5px 0px 5px; padding: 2px 3px 2px 9px; height: 55px; border: 1px solid; border-radius: 8px; " ng-repeat="i in items| filter:query" >
<div class="infobox-icon">
<img src="../images/system/decisionTree.png"></img>
</div>
<div class="infobox-data">
<span class="infobox-data-number action-buttons">
<a style="font-size: 18px;white-space: nowrap;width: 18em;overflow: hidden;text-overflow: ellipsis;" title="{{getChannelName(i)}}" href="#/channelList" ng-click="setLink(i)">{{getChannelName(i)}}</a>
</span>
<div class="infobox-content" style="font-size: 12px">
<i class="fa fa-list-ol bigger-90 blue"></i> {{i.version}}
<span style="font-weight: bold;">
<i class="fa fa-clock-o bigger-130 blue"></i> {{i.binDataUpdateUserName}}
</span> on {{i.binDataUpdatedOn}}
</div>
</div>
</div>
</div>
You can try a $scope.$apply() in then function after data is loaded from the service.
$scope.items = angular.fromJson(res.data);
$scope.$apply();
I am able to display file image and title on mouseovering for respective file. But for all filename the image and title is displaying in same place.
I need to display the respective image and title on above of respective filename. When page gets loaded I saw this small box. I don't know why.
After moving mouseover on first filename or second filename it will display the image and title in the same place as below.
HTML :
<style>
.hover-image {
width: 30px;
height: 30px;
border-radius: 20%;
position: absolute;
margin-top: -10px;
margin-left: 5px;
}
img.hover-image {
border: none;
box-shadow: none;
}
.hover-title {
color:black;
position: absolute;
margin-top: -20px;
}
</style>
<div class="file-image-tags1">
<ul>
<span style="width: 200px;"><a ng-show="hideHoveredImage==false;" class="hover-title">{{hoverTitle}}<img class="hover-image" src="{{hoveredImage}}"></a></span>
<li ng-repeat="image in files | filter :'image'" >
<div class="file-tag-baloon1" ng-mouseover="hoverImg(image.id)" ng-mouseleave="hoverOut()">
<span>
<a ng-click="photoPreview(image.id);" >{{image.fileshortname}}</a>
</span>
<span><a ng-click="removeImage(image.id)" class="remove1">X</a></span>
</div>
</li>
</ul>
</div>
Use the angular built in directives,
Check out the below code
HTML
<span ng-hide="show">
<img ng-src="https://unsplash.it/200/300/?random" />
</span>
<br/>
<span ng-mouseover="show=!show" ng-mouseleave="show=!show">
Image name </span>
Angular Controller
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.show="false";
});
Update 1:
Based on the comment I updated as below
Angular Controller
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.show = "false";
$scope.arrayofJson = [{
imageTitle: "someImageName1",
imagePath: "http://lorempixel.com/400/200/",
show: "false"
}, {
imageTitle: "someImageName2",
imagePath: "https://unsplash.it/200/300/?random",
show: "false"
}, {
imageTitle: "someImageName3",
imagePath: "https://unsplash.it/200/300/?random",
show: "false"
}, {
imageTitle: "someImageName4",
imagePath: "https://unsplash.it/200/300/?random",
show: "false"
}
];
});
HTML
<div ng-repeat="item in arrayofJson">
<span ng-hide="item.show">
<img ng-src="{{item.imagePath}}" /> </span>
<br/>
<span ng-mouseover="item.show=!item.show" ng-mouseleave="item.show=!item.show">
{{item.imageTitle}} </span>
</div>
The plunker remains the same and it is updated. Check out the LIVE DEMO
Try -
.file-image-tags1
{
position : absolute;
}
You can do this using ng-if ng-show/hide like below example.
$scope.hoverIn = function(){
this.hoverImage = true;
};
$scope.hoverOut = function(){
this.hoverImage = false;
};
<ul>
<span ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">Hover Me</span>
<span ng-show="hoverImage">
<img>.....</a>
</span>
</li>
</ul>
in function you can pass the file name and you can do much more
Html- i am writing a program so that the user clicks on an image and is linked to another image and to another i can do it for one image but am struggling with the code to make the second image link to the third and so on any suggestions greatly appreciated?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script language="JavaScript">
var clockID = 0;
function UpdateClock() {
if(clockID) {
clearTimeout(clockID);
clockID = 0;
}
var tDate = new Date();
document.theClock.theTime.value = ""
+ tDate.getHours() `enter code here`+ ":"
+ tDate.getMinutes() + ":"
+ tDate.getSeconds();
clockID = setTimeout("UpdateClock()", 1000);
}
function StartClock() {
clockID = setTimeout("UpdateClock()", 500);
}
function KillClock() {
if(clockID) {
clearTimeout(clockID);
clockID = 0;
}
}
</script>
<body onload="StartClock()" onunload="KillClock()">
<form name="theClock">
<input type=text name="theTime" size=8 style="text-align: center">
</form>
<font face="Tahoma"><a target="_blank" href="http://www.htmlfreecodes.com/"><span style="font-size: 8pt; text-decoration: none"></span></a></font>
<A HREF = "img2.png">
<img src= "img1.png">
<!--<A HREF = "img4.png">
<img src= "img3.png"> </a>-->
</body>
</html>
I'm using a show/hide function to reveal the Gmaps google maps plugin but when the onclick is executed the Gmap is shown but part of the map is missing and is greyed out.
I've looked online at various sites for a solution and only found the option to use "gmap.checkResize()" but not sure how to go about to use this with my code, and if it will even work for my problem...
I've added the code below and am looking for assistance with getting the whole map to show when onclicked.
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAL7_5Aste4KkbgvT91y3k9xQo4D0inr193z9lVfCY1TNJb6Lz5RQJyM7R-PR3bMS1i_GvwioUrJMaXw" type="text/javascript"></script>
<script type="text/javascript" src="javascripts/jquery-1.7.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.gmap-1.1.0-min.js"></script>
</head>
<style>
#map{
position:relative;
float:left;
width:450px;
height:400px;
}
.PlaceHeading{
color: #C6688D;
font-family: Arial;
font-size: 15px;
margin-bottom:-13px;
}
#content{
text-align:center;
}
a{
color: #C6688D;
}
.PlaceAddress{
color: #666666;
font-family: Arial,Georgia,sans-serif;
font-size: 12px;
font-weight: normal;
}
</style>
<script type="text/javascript">
$(function() {
$("#map").gMap({ markers: [{ address: "809 1st Ave. N.E. Calgary, Alberta",
html:'<div id="content"><center>'+
'<h1 class="PlaceHeading">Blue Star Diner</h1>'+ //*Title of location
'<p class="PlaceAddress">809 1st Ave. N.E.<br />'+ //*Street address of location
'Calgary, AB <br />'+ //*City and Province of location
'403-261-9998 <br/>'+ //*Phone number of location
'<a href="http://maps.google.com/maps?saddr=809 1st Ave. N.E.+Calgary,AB+Canada" target="_blank">' //*Enter Address info in url where appropriate to link to Google directions page
+'Get directions</a> <b>|</b> <a href="http://www.bluestardiner.ca/" target="_blank">' + //*Enter place url here
'Visit website </a> </p></center>' +
'</div>',
icon: { image: "mapPage/images/marker1.png",
iconsize: [25, 41],
iconanchor: [9, 34],
infowindowanchor: [9, 2] }
}],
zoom: 13 });
});
</script>
<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
document.getElementById("expandMap").src="mapPage/images/minus.jpg";
document.getElementById("mapText").innerHTML="Hide map";
}
else
{
document.getElementById(divId).style.display = 'none';
document.getElementById("expandMap").src="mapPage/images/plus.jpg";
document.getElementById("mapText").innerHTML="View map";
}
}
</script>
<body>
<a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><img src="/mapPage/images/plus.jpg" id="expandMap"alt="" style="float:left;" /><p id="mapText">View map</p></a>
<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
<div id="map"> </div>
</div>
display: none; means that the element is taking up no space on the page which seems to cause the GMap size calculations to not work properly. Using visibility: hidden; instead is one way to fix it. position: absolute; can probably help you out if the element taking up space is an issue.