When implementing a gadget, is there a setting that would tell blogger to display the gadget in a post (or on a homepage) only?
I know that one can add conditional tags to the template html but that's NOT what I'm after. I need to figure out a way how to do this via the gadget's code so that the end user doesn't need to interfere with any code to achieve the effect.
I've figured that this isn't possible.
A workaround I've come up with is to set the gadget's default height to 0, then use javascript to find out whether we're on a homepage or an individual post and then, depending on the requirement, resize the gadget to the desired height. In such case, it is necessary to include the <Require feature="dynamic-height"/> in the ModulePref section of the xml file and use the gadgets.window.adjustHeight() function.
The caveat with this workaround is that the gadget, event when its height is set to 0, will take at least 10px in height.
Related
I am using Template10 with the Hamburger starting project template. I'd like to have a margin between the hamburger area on the left and all content. I tried changing the shared Shell.xaml page (by adding a margin, etc.) but couldn't figure out the best way to sort it out. Conceptually, that makes sense, but it's the specific detail of how to make it work that I'm missing.
Is there an easy way to do it without changing each content page?
Regarding the questions in the comments: I want it in the closed case of a wide view; the question doesn't make any sense in any other case. As far as what I tried, it doesn't really ultimately matter, since none of what I tried worked - I'm asking what the right way is to do it, which I never figured out.
Here's what the default looks like, without a margin:
Here's what it looks like with a margin added to the content area, which is also how the sample template contents handle this:
I don't want to have to mark up every content page with left margins to get the offset in the second picture.
1: https://i.stack.imgur.com/jUIuO.png
Okay, now I have enough information. You have a few options here. The first is just bite the bullet like the rest of the developer community and format your pages like normal. But if you simply must, you can create an implicit Page style with a setter setting Margin="16,16,16,16" but, listen, and I am not kidding, you will ultimately regret it unless your app is super-simple. The biggest problem will be the spacing will be OUTSIDE the containing ScrollViewer.
Thanks for using Template 10.
On Linux I'm creating a webkit window which needs to display a certain URL.
I'm doing that like the following:
GtkWidget *main_window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
// Create a browser instance
WebKitWebView *webView = WEBKIT_WEB_VIEW(webkit_web_view_new());
// Put the browser area into the main window
gtk_container_add(GTK_CONTAINER(main_window), GTK_WIDGET(webView));
// Load a web page into the browser instance
webkit_web_view_load_uri(webView, "http://example.com");
// Make sure that when the browser area becomes visible, it will get mouse
// and keyboard events
gtk_widget_grab_focus(GTK_WIDGET(webView));
// Show the result
gtk_window_set_default_size(GTK_WINDOW(main_window), 800, 600);
gtk_widget_show_all(main_window);
However, I need to inject some CSS into this to hide a certain checkbox.
How do I inject CSS into the DOM.
I see that I can get the dom like
WebKitDOMDocument *dom = webkit_web_view_get_dom_document(webView);
But from here I can't see how to inject the CSS.
It sounds like the webkit_web_view_run_javascript() answer was a good solution to your specific problem, since you only needed to hide one checkbox.
To answer the general problem of how to inject arbitrary CSS: if you're using a recent version of WebKitGTK+, create a WebKitUserContentManager, call webkit_user_content_manager_add_stylesheet(), and then pass the WebKitUserContentManager when creating your WebKitWebView, either using webkit_web_view_new_with_user_content_manager() or by using g_object_new() manually if you need to set multiple construct-only properties.
Unrelated warning: webkit_web_view_get_dom_document() was removed in WebKitGTK+ 2.6. (The DOM API is only accessible via web process extensions nowadays.) You are using an old, insecure version of WebKitGTK+!
Its not clear which Webkit GTK version you are using, however concepts essentially remain same for both versions. For webkit version 2, its slightly more complicated as DOM manipulation is done on extension side.
You need to reach to the desired element - either by id e.webkit-dom-document-get-element-by-id or by name. This will return you instance of WebElement. If you use by name call, please be ware that there could be multiple elements with same name
From here you can either set the style by setting appropriate style attribute webkit_dom_element_set_attribute or other variations that can deal with styles and css rules.
Or you can take easy option and just execute the javascript that does the same thing by calling webkit_web_view_run_javascript
based on the custom-player-examples im building my own player.
i used the minimal-player template.
after i set up the player like i want it to be, i started to customize the design (color.css, structure.css, standard,css)
but now i am stuck badly..
i found out that i cant change the background-color of the waveforms unless i use a webkit or the waveform.js.
the webkit should do just fine for me...
my only problem is,
i dont know how to acess the track.waveform_url in neither my index.html or *.css files.
i know its inside waveform-container div but i need the url
.wavekit{
-webkit-mask-box-image: url(**IN HERE!!!**);
background: #81D8D0;
height: 280px;
width: 100%;
bottom: 0px;
position: fixed;
}
inside my stylesheet..
sadly i cant provide a link because its only on my hard drive yet
can somebody please help me out here?
thank you verymuch
Well, this is very hacky, but after a couple of attempts I haven't found a better way to get waveform URL.
Idea is that for first play there is an event of 'ajaxSuccess' that is firing and for the next ones there is 'scPlayer:onAudioReady' event. The point being that image’s DOM is being generated by the plugin only at some point, so we need a certain “hook” like an event to know for sure the image will be already present in DOM.
$(document).bind('ajaxSuccess scPlayer:onAudioReady', function () {
// get image from DOM of player
// it will be re-set every next play
console.log($('.sc-waveform-container > img').attr('src'));
$('.wavekit').style({
'-webkit-mask-box-image': $('.sc-waveform-container > img').attr('src')
});
});
Here's working example http://jsbin.com/uhofom/2/edit (only tested in Chrome)
Custom player project is outdated and will probably not get much attention. Its current state is not very extendable from the JavaScript point of view.
My suggestion would be to use something like Audio5JS or SoundManager2 to play music and to have custom HTML and CSS UI. To get actual sounds or sets data you could query our HTTP API or use SoundCloud JavaScript SDK. Then you'd have proper object with all data including waveform API and would control the process much better.
I recently stumbled upon this microsite from the Obama campaign:
http://www.barackobama.com/anniversary
Among the many cool features of this site is its dynamic header -- when you resize your browser window smaller, the "OBAMA * BIDEN" logo up top automatically floats to left side of the header and its width gets changed to 36px (thereby "hiding" the "OBAMA BIDEN" text).
How did the developers of this page achieve this effect? Is this javascript/jquery driven, or purely a CSS trick?
Ideas?
This question covers the window.resize event. You can do whatever you need in its handler.
Another option is to use media queries that allow you to change applied CSS once the browser window dimension changes (this is what the site you refer to does. It combines the style class changes with animations (use Chrome Developer Tools to see which styles get applied to the logo in both big and small browser dimensions)).
I am using dojox.form.DropDownSelect (not filtering select) in my page. But I am not able to restrict the height of the dropdown. I tried using size, maxHeght etc. but the drop down leep growing as the list grows.
Is there any way to restrict the height?
I don't know if there is a convenient, documented, way already there. Did you just try to guess things or did you actually search the API reference?
In case there is not you could try inspecting the generated dom structure through Firebug. There is probably a div ot table somewhere in there that you can limit the height via a css rule.
#that_drop_down .class_of_the_convenient_div {
height: 500px;
}