I am facing strange problem with dojo, I am not able to get background of dojo dialog( frame border, close button, etc,.)
I am only getting Title string and Content string, I can able to move the title string along with content string as like dialog, so I confirmed dialog popup is done, but not able to get background things of dialog.
I am using "claro" theme, I am also displaying "Button", it is coming nice with "claro" theme, but dialog is not coming, please help to find out the problem.
Note: I am running dojo from my own server.
You need two things.
1)
You must embed the Claro CSS.
<link rel="stylesheet" type="text/css" href="/path/to/your/dojo/copy/dijit/themes/claro/claro.css"/>
2)
You must add the class claro to your body tag.
<body class="claro">
</body>
Related
So basically as the title suggests. I have a react-native-webview component in my app and I want it to show a SoundCloud player via the SoundCloud widget. I also want to use the available methods exposed by the widget API (for example getDuration), add listeners to events, etc. I have tried 2 approaches to accomplish this, but each approach ends with a different issue that I haven't been able to resolve.
Option 1:
The source prop that I pass to the WebView is a static HTML string:
<html>
<head>
<script src="https://w.soundcloud.com/player/api.js"></script>
</head>
<body>
<iframe
id="sound-cloud-iframe"
src="${finalUri}"
>
</iframe>
</body>
</html>
That works well with the API and everything, but I can't seem to make it look good on-screen. It looks like this:
The red border marks the WebView component. I want the video to take up that entire space, which I can do with setting the width & height attributes of the iframe to 100%. The problem is, that when I do that, the elements inside the iframe retain their size (e.g the track/artist name, the progress bar at the bottom, etc). See here:
If I could somehow make it all scale by the same proportions, that would be amazing. Injecting JS scripts that scale each and every element individually seems like a bad solution.
Option 2:
The source prop that I pass to the WebView is a SoundCloud link, for example:
source={{uri: https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F94546771&show_artwork=true}}
That makes the video player look just right:
But, it won't allow me to use the API exposed by SoundCloud. The reason is that, as mentioned in their API reference, there needs to be some iframe element that I need to to pass into SC.Widget in order to be able to use all the methods and listeners that I need. There is no iframe here! The HTML content that renders inside the WebView is actually the exact inner document that would render inside the iframe if I used the static HTML that I put in Option 1. If I could make the API work like that somehow, that would be amazing.
So, basically, I'm wondering which option presents the more-easily-solved issue, if they're solvable at all. Any help would be much appreciated.
Solved, used this static HTML:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://w.soundcloud.com/player/api.js"></script>
</head>
<body>
<iframe
id="sound-cloud-iframe"
src="${finalUri}"
scrolling="no"
style="width: 100%; height: 100%;"
>
</iframe>
</body>
</html>
The meta tag was the key to success here (https://www.w3schools.com/css/css_rwd_viewport.asp)
I've two views on my view one is a UIWebview and other is a UITextView and I want both of them to display system default font. But, I just loaded a plain HTML text on my UIWebview and loaded another plain text on textview with default system font. On UIWebview it looks like Times New Roman and on textview it looks like Helvetica. Does the default system font differs for UIWebview?
This is the HTML page source that I load and below is a textview that uses system font.
<html>
<body>
This is a sample html Page
</body>
</html>
I presume if you didn't specify the Font name in html it will take default Font from OS. The default font may vary based on OS and browsers. In iOS you can specify the default name like given below:
<html>
<head>
<style type=\"text/css\">
body{font-family: '-apple-system','HelveticaNeue'; font-size:17;}
</style>
</head>
<body>
This is a sample html Page
</body>
</html>
In the above code it will take apple default font. If it is not available it will take HelveticaNeue font.
UIWebView is just a Safari component inside your app. So when you put HTML content into it, you're kind of loading a page.
The default fontface for web content is Times New Roman, so if you want to change it you need to style your HTML content to change default fontface, using the same type as the system.
I'm using WL 5.0.6
I create a new hybrid application with dojo.
I create a EdgeToEdgeList with two ListItem.
When I preview it, list items and background are grey but when I run the application in the Android device the list items and background are black.
How can I change this behaviour?
Thank you.
If you want to use the theme that you see in the preview on Android, remove:
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
from your main html. You are probably then going to want to add something like:
<link rel="stylesheet" href="dojox/mobile/themes/iphone/iphone.css">
I am a javascript dummy. I downloaded colorbox and jquery. They work great. I followed tutorials and read the example code but I cant figure this out.
When I open a colorbox ,it opens to the correct url, I can then click links in the box and surf other sites. That is all great. I need to have the url show in a address block at the top of the window. When I use a java popup it will work fine. You can goto other urls and the address shows in the address bar at the top of the window.
So I assume that I can do it with colorbox. This would make my page look much better than a plain popup. Can this be done. here is my code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<script src="http://www.mysite.com/colorbox/jquery.colorbox.js"></script>
<link rel="stylesheet" href="http://www.mysite.com/colorbox/colorbox.css" />
<script>
parent.jQuery.colorbox.close();
$(function ()
{
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
})
</script>
and my link to open the box
<a class='iframe' href="http://www.ebay.com">ebay </a></p>
If you chooes to help I beg you to show me where the new code go's. If you tell me to add a line of code I will not understand where to put it. I am trying hard to learn javascript but I am a very newbe. Thanks.
I don't think ColorBox is the right plugin for you to use, given its default design and your skill set. ColorBox is not designed to be "browser like" and let the user surf to other sites.
It is possible to change that design assumption, but it would require more advanced JS skills than you admit to.
Maybe you can achieve your aim by simply opening a new browser instance using a plain HTML anchor tag (<a>) and using the "target=" parameter.
Best,
KJM
I've built a form, and next to my form element I've placed a flash object. When the page is loaded, the form is display: block, and the flash object is display: none.
The layout looks something like (the img is there so that if the user doesn't have flash, the gif animation will play instead):
<form id="form"></form>
<div id="upload-anim-div">
<object type="application/x-shockwave-flash"
data="<?= PAL_STATIC_HOST ?>/music/introducing/flash/upload_animation.swf"
width="626"
height="600">
<param name="movie" value="<?= PAL_STATIC_HOST ?>/music/introducing/flash/upload_animation.swf"/>
<img src="<?= PAL_STATIC_HOST ?>/music/introducing/img/Anim-placeholder.gif" alt="upload animation (gif)"/>
</object>
</div>
When I submit my form, which is just to upload a file, I hide the form and display my animation div as follows in javascript:
$('#form').hide();
$('#upload-anim-div').show();
This works great in all browsers except Safari, where a big white space appears. Right clicking this white space simply gives me the following menu:
Flash movie not loaded... _not clickable_
About Adobe Flash Player 10.5.blah...
Why is the movie not loaded/loading?! If I simply display the movie when the document first loads (by removing the javascript line that initially hides it) it loads and displays fine! Any ideas would be greatly appreciated!
---EDIT---
I've now tried using swfobject, but get exactly the same problem. I used this kind of code in my javascript to embed my swf with javascript after displaying the upload-anim-div:
swfobject.embedSWF("myContent.swf", "upload-anim-div", "626", "600", "10");
Anyone have any further ideas?
Sounds like Safari tries to shave the page load time by not rendering Flash in a hidden div. How are you putting the Flash into the div, is it just an object tag, or are you using something like swfobject? If you're using swfobject you could write the Flash to the div when you reveal it.
I think you should try to embed your Flash content with swfobject: