I'm using the Twitter User Timeline widget from here. I want to change the summary that reads "Tweets" in the header, to say "News". How do I do that?
Method #1
Quite untechnical: Why not simply put your "sign" above the header? You know where the widget will be positioned, so in that same container go ahead and create a small div to put your topic there that covers the header saying Tweets.
Method #2
You can use the styling options as seen in Embedded Timeline Parameter Reference to hide the header:
<a class="twitter-timeline" href="https://twitter.com/fabric" data-widget-id="600720083413962752" data-chrome="noheader">Tweets von #fabric </a>
You can then add your custom header above the widget.
Obvious downside of this: you lose the follow button, which however you could easily include above the timeline widget by using the Follow Button widget.
Other
If none of the above is appealing to you, you can try what others tried and fiddle with the DOM after the widget is loaded: Styling the new twitter widget (embedded timeline)
Related
I implemented simple application according of example simple login view. Where we have login-view and main-view. But now, how I can implement on main-view MenuBar where every Items when clicked open different views. And those views are under MenuBar in same place (center on the page under MenuBar, on sample) in main-view. I tried with additional navigator(which name can be subNavigator) in main-view but we must register navigator in UI(I have got appropriate error). Second solution is that I create UI and in init method ManuBar and under it change every views(login-view, view1, view2 etc). But login-view have ManuBar and it is do not looks good. Is there any other way or are other ways to achieve something similar?
Your question is not at all clear. I suggest re-writing it. Perhaps with a sketch image.
TabSheet
Are you aware of the TabSheet widget? An easy way to switch between panes of content.
See the Book Of Vaadin, the class doc, and the live demo.
Also, look at TabSheet in the Reindeer theme as shown in this demo.
I'm developing a web application that is making use of tabs. I've run one issue that seems small, but I haven't been able to locate a solution and I'm worried it is indicative of larger problems with my code.
My application has one main page that includes a tab container with several content panes then inserted as children. I figured that having each content pane load an external HTML file and loading it that way was a good solution - it seemed to provide modular design and allow for easy changing of the contents of an individual tab. The issue I am running into now is that while everything loads correctly, I'm unable to provide anchor links in inside a tab or between tabs. Here is some sample code:
var tabs = new TabContainer({
style: "height: 100%; width: 100%;"
}, "tab-container");
tabs.startup();
var metadata = new ContentPane({
title: "Metadata",
id: "Metadata"
});
/* repeat for the non-metadata content panes */
request.get("/js/viewer/templates/splash.html").then(function (results) {
splash.set("content", results);
});
/* repeat for each pane */
For my metadata page I want it to contain information about the datasets I am providing to users. Ideally, it would have a table of contents with anchor links to the proper entries. However, when I implement an anchor link, like so:
Click me to jump down the page!
<!-- some content here -->
<div id="test">We made it!</div>
The link is clickable and it does in fact bring you to the proper location, but it seems to invariably load this in a new frame that requires a user to reload the page if they wish to do anything else. I've tried playing with tag properties but it's been to no avail. I'm also hoping to be able to link between tabs (say, if a user is querying on one of the query pages I have presented them and then wants to know where a dataset came from or other information).
Here is a simple imgur album showing what happens: http://imgur.com/a/JCnlH
After clicking the link in the first image, you're sent down the page. However, the tab bar and the navigation bar of the page disappear completely, even when you scroll back up. I don't know why this is.
So, this has been a long question, but here is the core of it:
What am I doing wrong with anchor links?
To answer your first question:
You should put all JavaScript inside your main page, not inside partials. This is not considered a best practice with JavaScript because it means you will have to eval() the content and usually when you start doing that when you don't need to, then you're doing something wrong.
In this case you can easily add all JavaScript code to the main page. If you need to wait for a specific tab to be opened or loaded, you can use the onShow or onLoad events on the dijit/layout/ContentPane widgets.
Also, when you're using ContentPane you should use the proper setters for adding content/HTML to it.
Rather than doing:
request.get("/js/viewer/templates/splash.html").then(function (results) {
dojo.byId("Splash").innerHTML = results;
});
You should be doing:
request.get("/js/viewer/templates/splash.html").then(function (results) {
splash.set("content", results);
});
Or if you don't have a reference anymore to the splash variable, you should be using registry.byId("splash").set("content", results).
About the hyperlinks, I have no idea. I'm not getting the same behavior, so could you explain a bit further on that?
Here's a (as far as I can see) working example: http://jsfiddle.net/n4515tsz/
In my case, this behavior seems to be caused by interaction of the overflow: hidden CSS property of my website's body interacting with the height: 100% property of my tab container. I didn't realize that the overflow: hidden property was set because it was part of a framework I was using. By changing the overflow property I have been able to achieve the desired behavior.
I just started working with JQM a little while ago. I used the default VS2012 asp.net mobile project to start with. I like how the mobile pages work, but wanted a fixed area at the top of each page that essentially has 3 columns one of which is a logo. I've done that (with a basic table to start with) in the _layout.cshtml, and right below that is where I start the JQM Page layout. This is all working well, and I like how the page transitions happen while keeping a fixed header area at the top.
However, I would like to add a button to my fixed area at the top that is styled similar to the other JQM buttons. This doesn't work because the buttons are not within a valid Page or Header data-role I presume. Is there a way to take advantage of the JQM styles for HTML that is outside of those data-roles?
As an example, I'd like to use the anchor tag for a Log In button and have it styled the same as it is with a gear-icon when it's within a div that has data-role = "header". I'm not sure I have a deep enough understanding to drill down through all the elements that are used in the .css file and was hoping there are other individual classes or something I can take advantage of.
This is the line I am trying to display as a button, but I am only getting text (does work as anchor tag though):
<a data-role="button" data-transition="pop" href="/Vision/Account/Login">Log in</a>
Also, I am using jquery.mobile-1.1.0 and jquery-1.7.2.
You can style any element as a button by calling the jQuery Button Widget on the element:
$('.login-button').button();
The button function also accepts options such as the icon and theme:
$('.login-button').button({
icon: 'gear'
});
See also: http://jquerymobile.com/test/docs/buttons/buttons-options.html
Try adding data-role="button" to your anchor tag.
I'm currently using a script for a popup window, where when you hit the link, a nice graphic popup window will appear. My problem is, that in it's current form it's a text link, which are working fine. But I want the entire row, that being the row the link is in, to be pushable, and open the popup window, instead of just the link.
Some will say I should use an onlick command of some sort, but my problem is, that my current link is defined as:
Link
And I have no idea how to add the rel and class to an onclick command for the row fx.
So is there some smart way to do this?
you can use this trick to make a whole cell a link
simply, add the text you want to link it in a <div> and set both width and height 100%
HTML:
<td><div>link</div></td>
CSS:
td>a>div {width:100%; height:100%}
you can see an example at JSfiddle (the second row):
http://jsfiddle.net/w8W4L/
My initial page has an empty div. An ajax transaction fills it with suitable h3/div content. If I call .accordion() before there's any content, it has no effect. If I call it after the first content is loaded, the first content looks good. Calling it a second time, however, does not work. Do I really need to destroy and redo?
At the moment you have to destroy and re-create the whole thing using the official stable release. There is already a feature request for it, scheduled for 1.next: http://bugs.jqueryui.com/ticket/4672
If you have a read above, mrfr0g says he built a custom accordion based on jQuery UI 1.8.2, give that a try.
give the inner DIV of each tab an id
and use document.getElementById("content1").innerHTML = "HelloEveyOne345443333334422" to dynamically change the content of each tab