I want to implement carousel on my web page.I have created a plunker page for the same.
In that link, i have used CSS3 transformations to create circle effects.
In the above link i have removed the code which i had for carousel implementation because it was not working.Actually what happens is that most of the jquery caosuel available like(elastslide,liquidcarosel,flexslider) etc work only if the img(which needs to be slided) is directly under "li" tag.But in my case, i can't keep img directly under "li" because of the css3 transformations i need.(See index.html page)
http://plnkr.co/edit/PxTtJ2expidIamWUqXLj?p=preview&s=carousel
for eg
<li>
<div class="ch-item">
<div class="ch-info ch-info1" >
</div>
<div class="ch-thumb ch-img-1">
<p class="text"> Java7</p>
</div>
</div>
</li>
Could anyone please suggest how can i implement it.
Related
I have an imported css template written on bootstrap, and want to use it inside Angular app.
Seems like exactly custom html attributes don't react a loading from router.
Application characteristics. This is a SPA, and all of pages are loaded inside Navbar Component, with corresponding router-outlet wrapping.
Problem. Any plugin will render included data only after "mechanical" refreshing page with browser "Reload this page" button. But if I change a src for image, from plugin custom attribute, for example
data-background="assets/images/slider_1.jpg"
to
img src="assets/images/slider_1.jpg"
, it will be loaded and shown from the first time.
Example of map plugin. Doesnt show nothing.
<div class="maps-container map-widget m-b-25">
<div class="map" data-addresses="[4.4, -4.4]"
data-icon="assets/images/map-marker.png"
data-zoom="16" data-street-view="1">
</div>
</div>
Example of slider plugin. No background image.
<section class="module-cover parallax text-center"
data-background="assets/images/slider_1.jpg"
data-overlay="0.5">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>This is title</h1>
</div>
</div>
</section>
Example of grid item for blog. Here, it should follow masonry style, but renders like strict grid.
<section class="module-cover parallax text-center"
data-background="assets/images/slider_1.jpg"
data-overlay="0.5">
You better use [attr.data]="name-of-custom-attr"
This way angular manages the use of custom html attributes correctly.
I'm using Umbraco to build my website and I defined a grid editor with its partial view, and also defined some javascript code to be applied to that grid editor. The javascript consists on applying some effects while hover. In my page I managed to work with the effects, but as I have several of these grid editors in my page, the effect gets replicated in all of them, so when I mouseover one of them, all the remaining grid editors from the same type get the effects too. For now I put my script at the Master.cshtml. How can I apply the effect to the grid editor I mouseover at that time? I managed to do something similar with other grid editor that I defined, but for this I didn't need javascript and everything worked fine.
Here is my code:
Script:
#foreach(var item in Model.Items) {
<div class="work-item work-item-box">
<a href=#Umbraco.TypedContent(item.GetValue<string>("workPage")).Url>
<div class="item item-image">
<img class="item item-image-img" src=#Umbraco.TypedMedia(item.GetValue<string>("image")).Url/>
</div>
<div class="item item-text" height="160" width="310">
<div class="item item-text-title">#Html.Raw(item.GetValue("company"))<br></div>
<div class="item item-text-description">#Html.Raw(item.GetValue("description"))</div>
</div>
</a>
</div>
}
My script:
<script>
$( document ).ready(function() {
$(".item").hover(function(){
$(".item-text").toggleClass('item-text-effect');
$(".item-image").toggleClass('item-image-effect');
$(".item-image-img").toggleClass('item-image-effect-img');
$(".item-text-title").toggleClass('item-text-title-effect');
$(".item-text-description").toggleClass('item-text-description-effect');
});
});
</script>
Thanks in advance!
Look at using 'this' to only target elements within whatever element you're hovering: How to get the children of the $(this) selector?
I'm having problems getting Foundation orbit to work. I can call it from regular HTML and it works fine but when I try to use dynamically generated Handlebars HTML, it does not load.
The page is here: http://danheidel.github.io/resume-foundation/#art-contact
The non-functional Orbit carosel is above, the functioning one is at the bottom of the page. (formatting on the latter is a bit screwy since it's not in the Foundation grid)
Source is here: https://github.com/danheidel/resume-foundation
I'm not seeing any errors on load so I suspect that Orbit is not firing on the dynamically templated HTML. Has anyone gotten Orbit to work with templating?
The dynamically generated HTML from Handlebars is below. As far as i can tell, it's all formatted properly.
EDIT: I'm almost certain that Orbit is not firing because it doesn't intercept HTML changes after the initial page load. I tested by having JQuery post-load modify a div with the proper HTML and Orbit did not intercept that either. Can anyone tell me how to get Orbit to fire post-load?
<div class="panel" id="minor-panel">
<h3>Contact</h3>
<ul data-orbit="">
<li>
<img src="img/contact part3_lbox.jpg">
<div class="orbit-caption">caption 1</div>
</li>
<li>
<img src="img/contact part4_lbox.jpg">
<div class="orbit-caption">caption 1</div>
</li>
<li>
<img src="img/contact part5_lbox.jpg">
<div class="orbit-caption">caption 1</div>
</li>
<li>
<img src="img/contact part6_lbox.jpg">
<div class="orbit-caption">caption 1</div>
</li>
</ul>
</div>
Ugh, poor showing Stack Overflow. :(
Anyhow, I dug through the JS and found the answer. Just make a call to:
Foundation.libs.orbit.init();
after each HTML update and it will properly format the slider.
I am trying to have tooltip for my personal website http://www.stacked.in. when I move the mouse on the link, I want to have tooltip displayed. Tooltip display content is already available inside the html page as a div element, but it is hidden. I want the tool-tip to be displayed only when I move the mouse over the link. I use jquery and jquery plug-in
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ for this purpose. Even if I get the some other jquery-plugin, I would be happy.
Please note that tooltip-content div inner html would not shown. Tooltip supposed to get the element and display it.
#tooltip-content {
display:none;
width:250px;
}
here is HTML code..
<div id="widget" class="span-8 " >
<h2>Example.com</h2>
<ul>
<li><h3>Example News 1</h3>
<div id="tooltip-content">
<div class="published">Thu Jul 8, 2010</div>
<div class="content">
This detail news 1 shown only on tooltip..
</div>
</div>
</li>
<li><h3>Example News 2</h3>
<div id="tooltip-content">
<div class="published">Thu Jul 8, 2010</div>
<div class="content">
This detail news 2 shown only on tooltip..
</div>
</div>
</li>
</ul>
There would be more than 100 elements requires tooltip. Any better tool or way to handle this problem? If you give me the code sample, I would be greatful to you.. I already searched so many ways of doing it. http://code.google.com/p/jquery-very-simple-tooltip/ comes near to solution but it requires initialization for all the tooltip notes.
I've found jQuery Tools from http://flowplayer.org/tools/tooltip/index.html to have an excellent tooltip. You can use either a title attribute on the element, or use the next DOM node as the tooltip for a non-titled element.
Very flexible, and I'm sure it'll suit your needs appropriately. Good luck!
I would like to create my own accordion component without using any AJAX toolkits, mostly for learning purposes. I am not sure quite where to start with this one. I'm assuming I would begin by creating div's for each section in the accordion. Perhaps each div would contain a header, which would be the actual button selected to move the accordion to that section. I am not sure the correct approach to take once an accordion's section button is selected though. Would I use the z-order, so that each section is of a higher z-order? Any help is appreciated.
Thanks
I would highly recommend picking up a book such as John Resig's Pro JavaScript techniques that will give you some ideas and initial thoughts about how to approach bulding your own client-side solutions.
Essentially, you would have an element to act as a header, for example <h1> or <div> under which you would have a <div> with an initial style of display: none;. Set up an event handler on the click event of the header to change the style of the div below to display: block and ensuring that any other content <div>s are hidden (do this by using a CSS class on each content <div> for example).
I'll leave the smooth animation to you as an exercise for how it might be accomplished. As a hint, I would recommend looking at how a JavaScript library like jQuery handles animation, by checking out the source.
The best way to order it would be like this
<div id="accordion">
<h3 class="accordion title">Title</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 2</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 3</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 4</h3>
<div class="accordion section">
Section Content
</div>
</div>
You would want to avoid z-order entirely because it is a compatibility mess. Instead you would have the accordion titles be what you would click to open the accordion. You would want to set all of the accordion section <div>'s to visibility:hidden; by default, and then, when one of them is clicked, change it's visibility, and hide all the others. If you want it to work with any amount of accordion sections, you would have it count each <h3 class="accordion title"> and each <div class="accordion section">, and pair those up into an array. When a title is clicked, show it's corresponding div. Alternatively you could give each one a separate ID, but the first way would be much more useful.
Actually, it might be display:none; instead of visibility:hidden;, I would try both.
In addition it's worth mentioning that the animation is usually handled by changing things like the size of the div, so if you were hiding a section, you would make the height smaller and smaller until it reaches 0 and is hidden.
See this question, you will notice my answer contains a demo with the basic workings that should get you started. It was only asked a few minutes ago!
It uses jQuery.