First, sorry becouse I'm just starting with jquery mobile and responsive design.
I'm trying to build a template with jquery mobile for create an mobile app.
The problem is with the mobile and tablets sizes.
My tests don't appear like I want. I want to build something like shows in the image.
http://aprendeinformaticaconmigo.com/images/resposive_app_template.png
Can anyone tell me how do this for different mobile and tablet sizes?
Thanks a lot!!
Like this? http://jsfiddle.net/rnErL/
Very little code for it
CSS:
.box {
max-width:500px;
width:100%;
min-height:200px;
background-color:green;
margin:5px;
margin-left:auto;
margin-right:auto;
}
.bottom-left, .bottom-right {
width:50px;
height:50px;
position:absolute;
background-color:green;
}
.bottom-left {
bottom:5px;
}
.bottom-right {
bottom:5px;
right:5px;
}
HTML:
<div class="box"></div>
<div class="box"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
Related
I've spent about a week or so on this, and there's very little documentation online so I figured I'd come on here to see if anyone could potentially help out. So the top level summary is that I'm trying to use an external library (neovis.js) to visualize a neo4j graph database in a Salesforce Lightning web component. I've already explored d3.js (which is compatible with Salesforces locker service) and a few other visualization libraries, but neovis.js would be the most viable option for my use case. I've made some slight modifications shown in the code below to avoid using Document.getElementById in the neovis.js library to select the element and append the canvas to the page.
However, once the canvas is drawn to the page, none of the canvas elements (nodes and edges) are shown on the screen. Here's the weird part though, I can still hover over where the nodes should be on the canvas, and the popup which displays specific information for each node appears on screen with the correct information for each node. I am not super familiar with how the canvas element works, but it seems to me as if some css property is not being applied because of Salesforce's locker service, which causes to elements to be rendered invisibly.
I've gone through a good chunk of the neovis.js library (which is just a library built on top of vis.js), and I've looked for places where perhaps styles aren't being applied to the canvas element; however up to now I've had no luck.
Here's the code I've used so far:
index.html
<template>
<lightning-card title="Neovis" icon-name="custom:custom19">
<div class="slds-m-around_medium">
<div id="neovisContainerViz" class="neoVizClass" lwc:dom="manual" style="height: 700px; width: 400px;">
</div>
</div>
</lightning-card>
</template>
index.js
drawNeovis() {
const config = {
container_id: "",
server_url: "bolt://neo4j.het.io:7687", //This is a publicly available neo4j database that I'm using for testing purposes.
server_user: "",
server_password: "",
labels: {
},
relationships: {
},
initial_cypher: "MATCH (node:Disease {name: 'lung cancer'}) RETURN node"
}
const parent = this.template.querySelector('div.neoVizClass');
const container = document.createElement('DIV');
container.className = 'neoViz';
parent.appendChild(container);
const viz = new NeoVis.default(config);
viz._container = container; //This is a property inside of the NeoVis library. This property is normally set by using the document.getElementById method, however I've replaced it with my predefined container to get around the Salesforce Locker Service.
viz.render();
}
Here is exactly what is rendered onto the Salesforce App page:
<div class="slds-card__body">
<slot>
<div class="slds-m-around_medium">
<div id="neovisContainerViz-67" class="neoVizClass" style="height: 700px; width: 400px;">
<div class="neovis">
<div class="vis-network" tabindex="900" style="position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;">
<canvas width="200" height="200" style="position: relative; touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;">
</canvas>
<div class="vis-tooltip" style="left: 5px; top: 5px; visibility: hidden;">
<strong>
license:
</strong>
CC BY 3.0
<br>
<strong>identifier:</strong>
DOID:1324
<br>
<strong>name:</strong>
lung cancer
<br>
<strong>source:</strong>
Disease Ontology
<br>
<strong>url:</strong>
http://purl.obolibrary.org/obo/DOID_1324
<br>
</div>
</div>
</div>
</div>
</div>
</slot>
</div>
The canvas and the tooltip are appended to the DOM, AND the tooltip dynamically updates when I hover over where the canvas elements should be displayed. However none of the nodes or edges are visible on the screen.
All in all, I am not very familiar with how the canvas element actually functions, and am hoping that someone can give me some tips on how to trouble shoot this issue and get the elements on the canvas to display.
Thank you all!
I was able to finally figure this out incase anyone else is running into similar issues. I wouldn't say this is the preferred answer, but it works (for now). Basically I injected an iframe into Salesforce, and inside of the iframe I injected the neovis.js library and generated the graph, works perfectly now.
I am using Zurb Foundation and Orbit slider to display product images on my clients website. He has requested that when you select a package from the dropdown list that it should change the image to the one that is relevant to that package. So he can now link the image to the package ID in the database and actually this all works fine now using my desktop. But when using my Ipad, changing the dropdown box has no effect on the image whatsoever.
Can anyone tell me why? And how I could fix this? As most of our customers actually come from Tablet and Mobile rather than Desktop, this is a real issue at the moment.
Many thanks
Example:
http://www.bitandpiecesvape.co.uk/shop/atomisers-and-tanks/aspire-nautilus/
<!-- [ORBIT SLIDER] -->
<ul data-orbit data-options="navigation_arrows: false; timer: false">
<?php
$priceLinkArray = array();
for($i=0;$i<count($imageArray);$i++) {
if($imageArray[$i]["spp_id"] > 0) {
$priceLinkArray[$imageArray[$i]["spp_id"]] = $i+1;
}
echo '<li data-orbit-slide="headline-'.($imageArray[$i]["spp_id"]).'">';
echo '<img src="'.URL_ROOT.'img/uploads/products/'.$imageArray[$i]["pdi_path"].'" style="margin: auto; max-height: 500px !important">';
echo '</li>';
}
?>
</ul>
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4 product-img-thumb-slider">
<?php
for($i=0;$i<count($imageArray);$i++) {
echo '<li>
<a data-orbit-link="headline-'.($imageArray[$i]["spp_id"]).'">
<img src="'.URL_ROOT.'img/uploads/products/'.$imageArray[$i]["pdi_path_thumb"].'" style="height: 50px; border: 1px solid #eee; margin: auto !important">
</a>
</li>';
}
?>
</ul>
<label><small>Product Package:</small>
<select id="productPriceOption" name="productPriceOption" onchange="updatePrice()">
<?php
for($i=0;$i<count($pricesArray);$i++) {
if($i==0) $currentPrice = $pricesArray[$i]['spp_price'];
if(isset($priceLinkArray[$pricesArray[$i]["spp_id"]])) {
$linkPriceId = $pricesArray[$i]["spp_id"];
} else {
$linkPriceId = 1;
}
echo "<a data-orbit-link='headline-".$pricesArray[$i]['spp_id']."'>
<option data-orbit-link='headline-".$pricesArray[$i]['spp_id']."' value='".$pricesArray[$i]['spp_id']."'>
".$pricesArray[$i]['spp_name']."
</option>
</a>";
}
?>
</select>
</label>
EDIT:::
I have just checked this page using Google Chrome and can see the same problem. It actually is only working for me so far on Windows 10 Internet Explorer. Can anyone help me find an alternative to data-options-link as it's obviously not very good on select boxes...
I have fixed the issue using some Jquery.
I changed the following:
<a data-orbit-link="headline-'.($imageArray[$i]["spp_id"]).'">
To:
<a data-orbit-link="headline-'.($imageArray[$i]["spp_id"]).'" id="headline-'.($imageArray[$i]["spp_id"]).'">
And then used the following Jquery, and applied the method to the Select OnChange (which worked fine as the select option value was sending the spp_id also).
function changeProductImage(value) {
if($('#headline-'+value).length > 0) {
$('#headline-'+value).click();
}}
I hope this helps anyone else. But I would like to leave this post open if possible, in case anyone can provide an solution to Zurb's built in data-orbit-link function on drop down menus.
Is it possible to detect the existence of the Browser's Quicktime plugin withOUT using Javascript?
I know how to test for Quicktime using Javascript, but not without.
My logic says that Javascript can be enabled/disabled by the user and the existence of the Quicktime plugin is determined by the programmers for each Browser. Therefore, each should an independent statistic ... even for Apple's iOS which has Quicktime built in.
Thanks,
I am really throwing away my question. However, I thought some of you might be curious why ...
I honestly do not know if it is possible to detect the existence of the Browser's Quicktime plugin withOUT using Javascript. I do know, for example, that Quicktime is built into Apple's current OS and probably many prior ones.
Nevertheless, I have come across the expression "Progressive Enhancement". As a direct result, I have discovered the works of others that result in my being okay with detection of Quicktime using Javascript.
The following illustrates what I mean:
The way-back-when driving force was to avoid document.write in the display of media players for .mp3, .m4a and the like.
The new approach places the media player, the no-js message, and the no-qt message in the html markup.
The default case is to show just the no-js message in the html markup. Using the "Progressive Enhancement" paradigm, if Javascript is enabled, then Javascript is used to first hide the no-js message. Depending on the presence of Quicktime, we then show the media player and hide the no-qt message, or vice versa. As a result, we progress from a "vanilla" text message about no Javascript to showing a media player if Quicktime is present.
For example, my html markup presents:
<section class="mediaWrapper">
<div class="mediaplayer">
<audio name="aMedia" class="aMedia" controls preload="auto"
src="audio/My Love Song Forever.mp3">
</div>
<div class="nojs">
Turn on Javascript to hear an awesome Love Song
</div>
<div class="noqt">
<a href="http://www.apple.com/quicktime/download/"
title="Get Quicktime"
onclick="window.open(this.href); return false">
Install Quicktime
</a>
to hear an awesome Love Song
</div>
</section> <!-- mediaWrapper -->
In my <head> is this <style>:
/* default settings for the html markup */
.mediaWrapper {
display: block;
position: relative;
text-align: center;
}
.mediaplayer {
display: none;
}
.nojs {
display: block;
font-size: 110%; /* for the no-js alert text */
color: #360;
font-weight: bold;
/*
text-align: center; // inherited from .mediaWrapper
*/
}
.noqt {
display: none;
font-size: 110%; /* for the no-qt alert text */
color: #360;
font-weight: bold;
/*
text-align: center; // inherited from .mediaWrapper
*/
}
Also in the <head> is this <script>:
$(document).ready (function() {
$('.nojs').hide(); // we're here, already!
if (QuicktimeIsPresent)
{
$('.mediaplayer').show();
$('.noqt').hide();
}
else
{
$('.mediaplayer').hide();
$('.noqt').show();
}
}); // $(document).ready
As already stated, the html markup (via the above <style>) shows just the vanilla no-js message. Via Progressive Enhancement, if Javascript is enabled, then the above <script> is seen. So, Javascript is used to first hide the no-js message. Depending on the presence of Quicktime, we then show the media player and hide the no-qt message, or vice versa.
Does jQuery UI support showing the number inside the Progressbar, like this:
Not to drudge up an old thread, but I was attempting this earlier tonight and used the following in my CSS:
.progressBarClass{
height:20px;
width:300px;
margin:0 auto;
}
.progressBarClassspan {
width:300px;
position:absolute;
text-align:center;
font-weight:bold;
}
And have the following in my HTML:
<script type="text/javascript">
$(function() {
$( ".progressBarClass" ).progressbar({
value: 50
});
});
</script>
<div class="progressBarClass"><span>50%</span></div>
Does the trick for me, although I need to come up with a better method to allow for percentages on the .ui-progressbar class instead of fixed values.
If it isn't any official way, you can add it. Just inspect the generated code with FireBug on Mozzila, get the id/class of the container and add the numbers in there yourself.
I never used jQuery UI's progressbar so I can't do that right now, but I'm sure it's not hard...
I've been trying to get modal windows working on a new site for some time now. I first tried jqmodal and had no issues displaying the modals, but the close buttons never worked - or at least they worked on some pages but not on others. I put a great deal of effort into debugging and couldn't find the issue.
I recently tried out greybox to see if I had better luck, but ran into a very similar issue. The close button at the top-right works fine, but I can't make a button within the modal that acts as a close. I've tried:
onclick="parent.parent.GB_hide();"
and similar variants but they just load whatever href is set to within the modal. However, if I do:
onclick="top.window.location.href='www.google.com'; parent.parent.GB_hide();"
this will close the modal and open Google, as intended. What I can't figure out is why I can't make a button that will just plain close it.
I feel like I'm missing something pretty fundamental since I keep running into similar issues. Incidentally the site is written in ASP.NET MVC with jquery and I'm primarily testing on Firefox right now.
I also realize this question is a bit vague, so I appreciate any thoughts and can supply more info if requested. Thanks in advance!
Edit: I still have no idea how to proceed. Nick's ideas were well taken but I see no Javascript errors on the page with either Firebug or Venkman. As far as I can tell the window should be closing.
Why would the second 'onclick' event above work, but not the second?
If I read your issue right, you simply are having problems closing the modal dialog.
I just put together an example using jqModal:
<!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>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/tmp/jqModal.js" type="text/javascript"></script>
<style type="text/css">
.jqmWindow
{
display: none;
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
width: 600px;
background-color: #EEE;
color: #333;
border: 1px solid black;
padding: 12px;
}
.jqmOverlay
{
background-color: #000;
}
.jqmWindow
{
position: absolute;
}
</style>
<script type="text/javascript">
$().ready(function() {
$('#dialog').jqm();
$('#jqmOpen').click(function() {
$('#dialog').jqmShow();
return false;
});
});
</script>
</head>
<body>
Open
<div class="jqmWindow" id="dialog">
Close
<input type="button" class="jqmClose" value="Close" id="jqmCloseBtn" name="jqmCloseBtn" />
Some text in the modal dialog
</div>
</body>
</html>
I have put both a hyperlink and a button just for example. It appears that jqModal needs/looks for the class to attach the close trigger.
EDIT:
I just tried your exact code from above and I didn't get a JavaScript error but also nothing happened, which is to be expected as my code does not know what GB_hide() is. So this got me thinking.
Is the button your clicking on like:
<input type="button" value="Close" id="Button1" name="Button1" onclick="parent.parent.GB_hide();" />
If so what is parent.parent.GB_hide()? Could GB_hide() be a function your are not implementing on this page.
Firebug shows me that parent.parent is the Window, so after putting:
<script type="text/javascript">
function GB_hide() {
alert('Close');
}
</script>
on the page I now get an alert displayed.
rather then using google give page url where you want to redirect
OnClientClick="top.window.location.href='http://localhost/yourpagename.aspx'; parent.parent.GB_hide();"
is the code to close and redirect jquery grey box on button click.