I am using a connector framework called js-graph-it to connect elements on my web page. When I am running an html file to as a demonstration of working of this project it works fine but when I am including this into the project, connecting lines are missing.
Here is the code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js-graph-it.js"></script>
<link rel="stylesheet" type="text/css" href="js-graph-it.css">
<style>
.canvas {
font-family: tahoma;
}
.block {
position: absolute;
border: 1px solid #7DAB76;
background-color: #BAFFB0;
padding: 3px;
}
/*.connector {
background-color: #FF9900;
}*/
.source-label, .middle-label, .destination-label {
padding: 5px;
}
</style>
</head>
<body onload="initPageObjects();">
<div class="canvas"
style="width: 1350px; height: 1250px;">
<h1 class="block" id="h1_block"
style="left: 100px; top:10px;">
h1 block
</h1>
<h2 class="block" id="h2_block"
style="left: 800px; top: 100px;">
h2 block
</h2>
<h3 class="block" id="h3_block"
style="left: 100px; top: 180px;">
h3 block
</h3>
<h2 class="block" id="h4_block"
style="left: 100px; top: 480px;">
h2_new block
</h2>
<!-- <div class="connector h1_block h2_block"></div>
<img src="arrow.gif" class="connector-start">
<img src="arrow.gif" class="connector-end">
<label class="source-label">start</label>
<label class="middle-label">middle</label>
<label class="destination-label">end</label>
</div> -->
<div class="connector h1_block h2_block">
<!-- <img class="connector-end" src="arrow.gif"> -->
</div>
<div class="connector h2_block h3_block">
<!-- <img class="connector-end" src="arrow.gif"> -->
</div>
<div class="connector h2_block h4_block">
<!-- <img class="connector-end" src="arrow.gif"> -->
</div>
</body>
</html>
and JSFiddle link
I am also attaching the screenshot as a proof that it is working as a standalone file.
Change onDomready to No wrap - in <head> in JSFiddle: http://jsfiddle.net/j6nhc9y1/3/
Basically, with those “wrapped” options the initPageObjects function won’t be on the top level where it needs to be in order to be called from an HTML inline event handler.
A better alternative would be to create dynamic event handlers within the script, e.g.:
window.addEventListener('load',initPageObjects);
Related
I've made a photo gallery by HTML and CSS. I want, when I'll click on in, my image will display in full size slowly in a box. But I don't know how can I make it. Can you help me to solve this? If possible, please give me full code. My code is:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> My gallery</title>
<style type="text/css">
.gallery {
border: 1px solid #000;
width: 160px;
}
.img_head {
border-bottom: 1px solid #000;
text-align: center;
}
img {
height: 150px;
width: 150px;
margin: 5px;
}
img:hover {
height: 158px;
width: 158px;
margin: 1px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="gallery">
<div class="img_head">
<h3>My Image</h3>
</div>
<img src="http://i.imgur.com/jnMGOR9.jpg?1" alt="image" />
</div>
</body>
</html>
Here is an example that might work for you:
jsFiddle Demo
HTML:
<div id="overlay" class="abs"></div>
<div id="lb" class="abs">
<div id="lbHead">
<div id="lbTitle">Your image</div><div id="lbX">X</div>
</div>
<div id="lbBody">
</div>
</div>
<div class="gallery">
<div class="img_head">
<h3>My Image</h3>
</div>
<img src="http://i.imgur.com/jnMGOR9.jpg?1" width="50" height="50" alt="image" />
</div>
js/jQuery:
$('img').click(function(){
var tmp = $(this).attr('src');
$('#lbBody').html('<img src="'+tmp+'" />');
$('#overlay, #lb').fadeIn(1800);
});
$('#lbX').click(function(){
$('#overlay, #lb').fadeOut(800);
});
CSS:
.abs {position:absolute}
#overlay{top:0;left:0;right:0;bottom:0;background:black;opacity:0.5;}
#lb{top:5%;left:3%;width:94%;height:50%;overflow:hidden;}
#lbHead{height:40px;width:100%;background:darkcyan;}
#lbTitle{float:left;width:70%;height:30px;color:white;}
#lbX{float:right;width:30px;height:30px;padding:10px;text-align:center;}
#lbX:hover{background:white;color:darkcyan;cursor:pointer;}
img:hover{cursor:pointer;}
#overlay, #lb{display:none;}
You can use these type of gallery
http://www.jqueryscript.net/demo/Responsive-Photo-Gallery-with-jQuery-and-Bootstrap-3/
https://blueimp.github.io/Bootstrap-Image-Gallery/
http://ironsummitmedia.github.io/startbootstrap-thumbnail-gallery/#
I have similar case like facebook wall.
In place of post in my case user enters URL.
Initially it looks like this:
I have text box for this in place of text area.
Now when user takes cursor it changes to :
Problem with me is how I expand textbox and show button like share in facebook when user takes cursor into textbox.
More when user increase the content into textarea it, downside div which contains button automatically move down.
In my case when user enters url , I show url preview below text box. preview size varies. So how can i create similar case show that button below it automatically move downward.
MY initial view:
When user enter cursor into Text box it changes to:
I have manually place buttons at some distance. I want them to automatically repositioned as per preview size.
when user enters url it looks like this:
I want to show buttons just below textbox like facebook does. When url entered as per preview size the buttons should move downward.
Any idea how can I achieve this?
Buttons are css button, placed into div. Working in PHP.
Source code:
http://codetidy.com/6983/
<html>
<head>
<html xmlns:fb="http://ogp.me/ns/fb#">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<meta content="utf-8" http-equiv="encoding" />
<link href="content/rateit.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<link href="content/bigstars.css" rel="stylesheet" type="text/css">
<style>
//css for button
label {
color: #B90000; /* makes the text-black */
}
label2 {
color: #3b5999; /* makes the text-black */
}
</style>
<link rel="stylesheet" class="cssStatics" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" class="cssButtons" type="text/css" href="css/linkPreview.css" />
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/linkPreview.js" ></script>
<script>
$(document).ready(function() {
$('.linkPreview').linkPreview();
// setting max number of images $('.linkPreview').linkPreview({imageQuantity: "put here the number"});
// e.g. $('.linkPreview').linkPreview({imageQuantity: 15});
});
</script>
</head>
<body style="height: 560px">
<div>
<img alt="" src= "3.png" style="top: 15px; right: 689px; position: absolute; height: 91px; width: 417px"/>
</div>
<div >
<div style="top: 20; left:20"> <img id="i1" src=""> </img>
</div>
<div class="rateit bigstars" id="rateit99" style="z-index: 1; display:none; left: 45px; top: 45px;" data-rateit-starwidth="32" data-rateit-starheight="32">
<label color="red" style="z-index: 1; left: 600px; top: 180px;" onclick="alert($('#rateit99').rateit('value'))">
<b>
Rate Me
</b>
</label>
</div>
<form action="data.php" method="POST" onsubmit="showUser(this, event)">
<!-- <div style="z-index: 1; left: 420px; top: 40px; position: absolute; margin-top: 0px">
<label><b>Enter URL:</b></label><br/>
</div> -->
<div style=" width: 15%; margin: auto; margin-top: -10px; text-decoration: none; text-shadow: 0 1px 0 #fff; padding: 10px 20px; text-align: justify; ">
<div class="linkPreview" style="z-index: 2;">
<div id="previewLoading"></div>
<div style="float: left;">
<div style="left: 420px; top: 40px; position: absolute; margin-top: 0px">
<input type="text" id="text" name="sent" contenteditable="true" style=" text-align: left; height: 30px; width:512px; " placeholder="Enter URL ..."/></input>
<div id="postPreview" style="display:none"></div>
</div>
<div style="clear: both"></div>
</div>
<div style="left: 420px; top: 70px; position: absolute; margin-top: 0px">
<div id="preview">
<div id="previewImages">
<div id="previewImage"><img src="img/loader.gif" style="margin-left: 43%; margin-top: 39%;" ></img>
</div>
<input type="hidden" id="photoNumber" value="0" />
</div>
<div id="previewContent">
<div id="closePreview" title="Remove" ></div>
<div id="previewTitle"></div>
<div id="previewUrl"></div>
<div id="previewDescription"></div>
<div id="hiddenDescription"></div>
<div id="previewButtons" >
<div id="previewPreviousImg" class="buttonLeftDeactive" ></div><div id="previewNextImg" class="buttonRightDeactive" ></div>
<div class="photoNumbers" ></div>
<div class="chooseThumbnail">
Choose a thumbnail
</div>
</div>
<input type="checkbox" id="noThumb" class="noThumbCb" />
<div class="nT" >
<span id="noThumbDiv" >No thumbnail</span>
</div>
</div>
<div style="clear: both"></div>
</div>
</div>
<div style="clear: both"></div>
<div class="previewPostedList"></div>
</div>
</div>
<div style="z-index: 1; left: 420px; top: 280px; position: absolute; margin-top: 0px" onclick="myFunction(document.getElementById('text').value)" >
<button onclick="show2(); myfunc();" id="b1" >
Get Sentiment
</button>
</div>
<div id="d1" height="40" width="60" name="sent2" style=" border:1px solid black; z-index: 1; left: 950px; top:80px; position: absolute; margin-top: 0px" placeholder="Preview title" >
</div>
<div id="d2" height="40" style="border:1px solid black; z-index: 1; left: 950px; top:100px; position: absolute; margin-top: 0px; min-width:60; overflow:auto" placeholder="Preview Url">
</div>
<div id="d3" height="80" border="1" style="border:1px solid black; z-index: 1; left: 950px; top:140px; position: absolute; margin-top: 0px" placeholder="Preview Desciption">
</div>
</form>
<div style="z-index: 1; left: 720px; top:280px; position: absolute; margin-top: 0px">
<button onclick="makeAjaxCall(); return false;" value="View Graph" >
View Graph
</button>
</div>
</div>
<h4>
<div id="txtHint" align="justify" style="z-index: 1; display:none; color:#C7F0FF; left: 35px; top: 260px; padding: 20px; position: absolute; border:1px; margin-top: 0px; width:300px;height:350px;overflow:auto; -webkit-border-radius: 12px; -moz-border-radius: 7px; border-radius:7px; background: -webkit-gradient(linear, left top, left bottom,color-stop(100%, #F70247), color-stop(150%, white), color-stop(100%, #D7E9F5)); background: -moz-linear-gradient(top, #F70247 0%, #F70247 10%, #F70247 130%); ">
</div>
</h4>
<script src="content/jquery.rateit.js" type="text/javascript"></script>
</body>
</html>
I have tried some usual document object commands like getElement by id/by tag/by name. They all give null, only bale to identify iframe id"my_dash" but can not access innerHTML. Either gives undefined or nothing in alert. I was trying to access the iframe "iframe_Content_portlet1" to change its src by making a javascript function to work on click link but was not working. Please suggest how to access it....
Given below is the code one finds in firebug.
*regarding context from my main code *
<tr>
<td colspan="10">
<!--this is the iframe accessible by main jsp-->**
<iframe id="my_dash" width="990px" height="935px" padding-left:="200px" src="http://172.31.144.171:8080/pentaho/content/dashboards?solution=airport&path=%2FMain&action_name=ATM-Dashboard.xdash">
<!--content inside the main iframe-->**
<html class=" ext-strict" xmlns:pho="http:/www.pentaho.com">
<head>
<body id="ext-gen6" class="pentaho-transparent ext-gecko ext-linux pentaho-page-background">
<div id="wrapper" class="wrapper">
<div id="dashboard-content">
<div id="titlebar" class="title" style="position: absolute; display: block; left: 0px; top: 0px; width: 990px; height: 23px;">
<h1 id="dashboard-title" class="pageTitle">New Dashboard</h1>
</div>
<div id="widget-area" class="widget-area" scrollexception="true" style="display: block; top: 29px; width: 990px; height: 906px; left: 0px; z-index: 30;">
<div id="widget-area-scroll-shim" style="width:100%;height:100%;"></div>
<div id="select-frame-left"></div>
<div id="select-frame-top"></div>
<div id="select-frame-bottom"></div>
<div id="select-frame-right"></div>
<div id="FilterPanel" class="povContainer" style="position: absolute; top: 0px; width: 100%; height: 100%; left: 0px; z-index: 30; display: none;" pho:panel="FilterPanel">
<div id="hbox1" style="position: absolute; top: 0px; width: 990px; height: 300px; left: 0px;">
<div id="Panel_1" class="widgetContainer" style="position: absolute; top: 5px; width: 567.044px; height: 290px; left: 5px; z-index: 30;" pho:panel="Panel_1">
<div class="widget">
<div id="wgtHead-Panel_1" class="wgtHead" ondblclick="pentahoDashboardController.panelTitleDoubleClick('Panel_1')" onclick="pentahoDashboardController.panelTitleClick('Panel_1', true);">
<div id="dataContainer-Panel_1" class="dataContainer" style="height: 265px;">
<div class="rightCorner">
<div class="wgtData">
<div id="content-area-Panel_1" class="panel-contentarea" onclick="pentahoDashboardController.panelTitleClick('Panel_1', false)" style="top: 23px; width: 567.044px; height: 265px; left: 0px;">
<!--this is the iframe I want to access in the same jsp(it is being accessed by another jsp, not included in the main jsp)-->**
<iframe frameborder="0" src="http://172.31.144.171:8080/pentaho/pentaho-solutions/airport/ATM/scorecard/common1.jsp?dashboard_id=1&portlet_id=1" border="0" style="width:100%;height:100%;border:0px">
<html>
<head>
<body>
<style type="text/css">
<div>
<!--this is the iframe I want to access in the same jsp(it is being accessed by another jsp, not included in the main jsp)-->
<iframe id="iframe_Content_Portlet1" width="100%" height="100%" style="overflow:hidden;"src="http://172.31.144.171:8080/pentaho/content/reporting/reportviewer/report.html?solution=airport&path=%2FATM%2Fscorecard&name=atm_scorecard.prpt&locale=en_US&username=joe&password=p##ssw0rd">
<html class="dj_gecko dj_contentbox" xmlns:pho="http:/www.pentaho.com">
<head>
<body class="tundra body pentaho-page-background">
</html>
</iframe>
</body>
</html>
</iframe>
</div>
</div>
</div>
</div>
<div id="wgtFooter-Panel_1" class="wgtFooter">
<div class="rightCorner"></div>
</div>
</div>
</div>
How are you trying to reach what's inside your frame?
Because something along the lines of frames["my_dash"].document.getElementById("XXXX") should work.
See https://developer.mozilla.org/en-US/docs/DOM/window.frames for a little doc on frames.
I have a particular problem that I need help with.
I have a div which contains a lot of other divs which I would like to be able to zoom into. for example, a few of the child divs have text and I'd like the user to be able to zoom in to see what they say.
here is an example -- > http://jsfiddle.net/du5ye/3/
I've though that maybe I could use jquery to change the classes of everything inside, but I'd like to not hard code the new sizes, rather every property in the main wrapper div would get larger by a percentage as the user scrolls his mouse wheel. In addition, I'd like the user to be able to scroll around the div by dragging, quite like google maps. Is this kind of thing possible? and how would I go about it?
Here is the entire code for those that would rather avoid jsfiddle;
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<style>
.layoutGreys {
background-color: #DDD;
border: solid thin #BBB;
padding-left: 10px;
padding-right: 10px;;
float: left;
}
.Group{
background-color: #955;
width: 50px;
height: 35px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
float: left;
}
.Divider{
width: 10px;
height: 35px;
float: left;
<!--border-top: medium solid #999;-->
margin-top: 10px;
}
.wrapper{
width: 560px;
height: 175px;
background-color: #333;
border: thick #888 solid;
}
</style>
<body onload="CreateBox()">
<div id="wrapper" class="wrapper">
<div class="layoutGreys">
<div class="Group"></div>
<!-- Parent -->
<div class="layoutGreys">
<!-- Parent Icon -->
<div class="Group" style="float: none;"></div>
<!-- Children -->
<div class="layoutGreys">
<div class="Group"></div>
<div class="Divider"></div>
<div class="Group"></div>
<div class="Divider"></div>
<!-- Parent -->
<div class="layoutGreys">
<!-- Parent Icon -->
<div class="Group" style="float: none; "></div>
<!-- Children -->
<div class="layoutGreys">
<div class="Group"></div>
<div class="Divider"></div>
<div class="Group"></div>
<div class="Divider"></div>
<div class="Group"></div>
</div>
</div>
<div class="Divider"></div>
<div class="Group"></div>
</div>
</div>
<div class="Group"></div>
</div>
</div>
</body>
</html>
Have you tried the css zoom property? or maybe the css-transforms like scale()?
You can make your outer div overflow: scroll; and bind mouse down events to scroll the div for the pan and drag effect.
* I know this question is old, but It may help future visitors.
Try modifying this plugin to your needs - http://www.htmldrive.net/items/demo/394/JQuery.iviewer-zoom-image-and-to-drag-effect
Use zoomooz.js
It is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details.
I'm in bit of a pickle here.. So I have rows of divs, think of them as mini boxes. I'm able to scroll through them within a specified width/height area. using : http://manos.malihu.gr/jquery-custom-content-scroller
Now, within one of those Div, I have more content that I'd like to scroll within that Div. And that is where the problem arises. No matter what I do, I just can't achieve it.
Here is an example skeleton:
<style type="text/css">
.rows{
margin:50px auto; width:400px; height:405px; overflow:auto;
}
.row{
background: lightblue; height: 370px; width: 320px; margin: auto;
padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px;
}
.column{
float:left;
}
.columns{
margin:50px auto; width:800px; height:405px;
}
</style>
<DIV id="container">
<DIV class="columns">
<DIV class="column">
<DIV class="rows"> <div class="row"></div><div class="row"></div><div class="row"></div> </DIV>
</DIV>
<DIV class="column">
<DIV class="rows"> <div class="row"></div><div class="row"></div><div class="row"></div> </DIV>
</DIV>
<DIV class="column">
<DIV class="rows"> <div class="row"></div><div class="row"></div><div class="row"></div> </DIV>
</DIV>
</DIV>
</DIV>
<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery-ui-1.8.21.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/jquery.mCustomScrollbar.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$(".rows").mCustomScrollbar({
scrollButtons:{ enable:false }
});
});
</script>
====================
To clarify further, within the div class "row", I'll have lets say a long paragraph that needs to be scrolled within that box.
Thanks
======================
JS/CSS links:
http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js
http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mousewheel.min.js
http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mCustomScrollbar.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js
http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mCustomScrollbar.css