I am currently creating a React dashboard with multiple charts. I want to create a section on the dashboard that allows users to flip through the different charts in a slideshow fashion. Each chart will be located inside a div. The code currently looks like this:
<div className="chart">
<chartOne />
<chartTwo />
<chartThree />
<div>
I want to create a slideshow that will allow users to easily change the chart that they are viewing. What would be the best way to do this, a slideshow, or some sort of toggle button? Thanks in advance.
Related
How can I dynamically change the styling on the VisualForce Page depending on the Lightning/ Classic.As we are in the process of migrating from Classic to Lightning we want the VF page to be compatible in both the User Interfaces. I am trying to set the div tag based on the UI Theme detection
<div style= "{IF($User.UIThemeDisplayed == 'Theme3'? 'position:relative;left:150': 'position:relative;left:400px')}">
<apex:outputLabel value="ABC"></apex:outputLabel>
</div>
But there is no change in the Alignment, it just shows the text towards the left in both the UI
Im trying to add a link to the infobig2.jpg image in my gallery section. I would also like to add another slide once you enter the gallery. My website is www.24kdesignz.com in the infographic section I want the pic to link to http://vs0022.businesscatalyst.com/
<img class="img-responsive project-image" src="assets/images/info.jpg" alt=""><!--Project thumb -->
<div class="hover-mask">
<h2 class="project-title">Infographic</h2><!--Project Title -->
<p>Illustrated | Icon Driven</p><!--Project Subtitle -->
</div>
<!--==== Project Preview HTML ====-->
<div class="sr-only project-description" data-images="assets/images/infobig.jpg,assets/images/infobig2.jpg" >
<p>Infographics – An Infographic is a visual representation of data and information that is presented through a series of design-centric graphics. Its sole purpose is to educate viewers on a topic in a simplistic way – with information that is easy to digest.</p>
</div>
</article><!--End Project Item -->
After inspecting your site it looks like you have a lot of plugins. The portfolio project section from your site's theme is injected using a jQuery library called "Masonry." Inside of your projects assets >> javascript folder there's also a file called "scripts.js" - this is where the theme author injects the images into the portfolio project items.
Solution: Images can't be links. You have to wrap it in an anchor tag. In your specific case, you're going to have to do it using jQuery.
Assuming your HTML markup looks something like this, add a unique id selector to the image you want to become a link:
<li id ="image2">
<img id ="uniqueId" src="/assets/images/infobig2.png">
</li>
Then use jQuery to grab it and wrap it in an anchor tag:
$("#uniqueId").wrap($('<a>', {
href: '/assets/png/' + data.uniqueId
}));
The other solution here would be to just add a link under the image using plain html if you don't feel comfortable editing your theme's jQuery code.
Right now at my job, I'm tasked with creating a monitoring dashboard site. I'm thoroughly looking through a lot of different design choices and what my company wants, but all the templates I'm looking at for dashboards aren't formatted the way the company wants: a nested tab feature, not a side bar navigation.
Upon looking through a bunch of nested tab examples, one of them caught my attention which was Zozoui's Nested Tabs. This isn't something I've seen from BootStrap and JQuery UI, so I don't even know how to begin with starting something like this, but I'd like to change a couple of things here and there, like right before the second set of tabs, have a description of the first current tag.
So in short, how do I create my own nested tab feature like Zozoui's Nested Tabs?
You can make a menu and a div for contents when you click a specific tab it's contents should show in that div.do it by jquery or js.
HTML
<nav id="menu">
<a id="item1">item1</a>
<a id="item2">item2</a>
.
.
.
</nav>
<div id="contents">
<div>
jquery
$("#menu a").click(function{
$("contents").html(//something that you want);
});
I'm developing an SAP-ui5 XML view. In that view I created dynamic custom tiles using the CustomTile tag, as demonstrated in this image:
<TileContainer
id="container"
height="400px"
tileDelete="handleTileDelete"
tiles="{/TileCollection}">
<tiles>
<CustomTile id="ct1">
<content>
<VBox>
<Toolbar class="backcolor" design="Transparent">
<Text class="sapMHeader" text="Dynamic content" />
</Toolbar>
<Button type="{infoState}" text="Button"
icon="sap-icon://approvals"
ariaDescribedBy="defaultButtonDescription genericButtonDescription">
</Button>
</VBox>
</content>
</CustomTile>
</tiles>
</TileContainer>
Currently, clicking on the navigate button slides three tiles per click. I want to get it to slide only one tile per click. How do I achieve this?
The TileContainer control is responsive meaning how many tiles you see totally depends on the available screen space and nothing else. The scroll-buttons act as an overflow and slide a complete 'page' just as a Carousel would do. There is no way of changing this behavior via existing API.
If you really want to adapt this behavior TileContainer.prototype.scrollLeft and TileContainer.prototype.scrollRight are probably a good starting point.
BR
Chris
I want to script a website which will have a menu on the left side:
when clicked on an item on this menu the site slides up or down (but there should be no option to scroll up or down).
Yet now when the user interacts with something in the webpage (not the menu) the site slides right/left.
So there are no reloading of the site!
For example the menu contains home and account.
if the user is on home and clicks on acount the site slides down (but he should not have the option to scroll down by himself)!
Now on account when he clicks on a button named "Edit Account" the site slides (but not the menu) right to a page were he can edit his account no when he hits save the site slides back to account
With site I mean an inner pre defined box of course the header and footer don't move!
Here is a small example of a script I wrote on jsfiddle.
I know that this will look very cool but I don't want that the user to need to sacrifice website loading speed just for a cool sliding effect!
Now my question is: would this be good programming practice?
Right if i believe right you want something like my website "www.ohlookawebsite.com" what you will need to do is use jquery for .show and such to create the effect so for example
<div id="navagation">
<div id="home" onclick="homeClick()">Home</div>
<div id="about" onclick="aboutClick()">About</div>
<div id="account" onclick="accountClick()">Account</div>
</div>
That would be the navagation then you can set out the <div>s on the page with the ones that shouldn't be shown yet with style="display: none;" such as;
<div id="boxHome">
Welcome to the home page!
</div>
<div id="boxAbout" style="display: none;">
Welcome To the About Page!
</div>
<div id="boxAccount" style="display: none;>
You're account info!
</div>
You will need to the use jquery and javascript to show different "Pages"
function homeClick(){
$("#boxAbout").fadeOut(500);
$("#boxAccount").fadeOut(500);
$("#home").css("color", "green");
$("#boxHome").delay(500).fadeIn(1000);
}
You can see an example of this here: http://jsfiddle.net/gM4hB/4/
Hope this helps