Use full page multiple times in different tabs - javascript

As you can see I have different tabs. I want to use the full-page method for each group( Each group has its own section slide ) separately. As I can use the full page only once I'm stuck. Can you tell me how to do this?
It's working fine for the first group but not working on the second. I also tried the destroy method mentioned in the documentation of fullpage.js

You can destory and initialisee fullpage.js every time you need a new instance.
Use the fullpage_api.destory('all') method and then initialise it again.
It should look kind of like this:
function showTab1(){
fullpage_api.destroy('all');
// loading HTML for tab1
loadHTML();
new fullpage('#fullpage', options);
}
function showTab2(){
fullpage_api.destroy('all');
// loading HTML for tab2
loadHTML();
new fullpage('#fullpage', options);
}

Related

Convert slider/carousel to pager while switching from Desktop to Mobile View

I have created a slider/carousel like the one below on left - Desktop view.
I would like it to be switching to Pager based slider on mobile screens - like the one on the right side.
I have used this script for desktop slider -
https://www.jqueryscript.net/rotator/Simplest-3D-Image-Carousel-Plugin-For-jQuery-Carousel-js.html
Any help will be great, Thanks!
You will have to use 2 plugins for this. As far as I can tell there is no "pager" option for the plugin you are using. And then, using JavaScript you should destroy current plugin and initialize new one. Which could also be a problem since I don't see any sort of destroy method for your plugin. So ok, it would look something like this.
function init3DSlider() {
$('.your-container').carousel({
your: 'options'
})
}
function initPagerSlider() {
$('.your-container').somePagerPlugin({
// ...your options
})
}
// Function for checking which slider should turn on.
function turnOnSliderDependingOnResolution () {
if(window.matchMedia('(min-width: 768px)').matches) {
init3DSlider()
// ...somehow destroy pager slider
} else {
initPagerSlider()
// ...somehow destroy 3d slider
}
}
// Run turnOnSliderDependingOnResolution function on window resize.
window.addEventListener('resize', turnOnSliderDependingOnResolution)
Since this 3d slider doesn't have destroy method, try using this: http://ub4.underblob.com/remove-jquery-plugin-instance/
Or you can use a more simple solution, and that is to duplicate your slider, initialize both sliders (3D and pager). And then using CSS media queries you would hide one or the other.
Not exactly optimal but it will work.

EmberJS Add Animations to DIV for Fade Out and Fade In on Actions Event

I am new to ember, but have almost finished what I set out to do. I just need to animate things as the final step.
I am using animate.css and animateCSS for my animations.
I have a set of tags. When the user clicks on each button, i call the action onBtnClicked in my controller. When this button is clicked, I basically change the selectedImage property on my controller to a different URL. The selectedImage property automatically updates a tag and the image is changed on the website.
What I would like to do is when the user clicks on the button, to run an animation to transitionOut the selectedImage and transitionIn the new image.
I am able to execute the animations, but the selectedImage updates too quickly and thus the new image is transitionedOut and transitionedIn.
If you have any advice on how to effectively handle the transition out animation it would be greatly aprpeciated.
You can simply first run transitionOut animation, and only when it's complete set the property. Something like this:
actions: {
select: function(item) {
var me = this;
Ember.$("img").fadeOut(function() {
me.set('currentImage', item);
Ember.$("img").fadeIn();
});
}
}
I've made a small demo with jQuery animations (animateCSS seem to use same callbacks) http://emberjs.jsbin.com/hiyatajeve
Out of the box Ember doesn't support animated transitions since when you transition out, it just removes the template partial from the DOM. And Ember.View hooks doesn't support promises.
I personally don't like managing views from controllers, this is another abstraction layer.
So I would recommend you to use Liquid Fire Addon which makes Ember to handle animated transitions in native way.

jQuery - bxSlider plugin reloadSlider issues

I'm using jQuery with the bxSlider plugin, here is the link to it just incase: http://bxslider.com/
I'm trying to reload the slider and my custom pager after I've removed certain slides from it.
Here is what I have tried:
$(function() {
var slider = $('#slider').bxSlider({
pagerCustom: '#bx-pager'
});
$('.list').on('click', '.delete', function() {
image = $(this).closest('li').find('[type="hidden"]');
// image.attr('id') contains a string: image-0, image-1, image-2, etc.
$('#slider, #bx-pager').find('.' + image.attr('id')).remove();
slider.reloadSlider({
pagerCustom: '#bx-pager'
}); // I have also tried: slider.reloadSlider();
});
});
It works partially. What happens is the slider gets reloaded just fine but it removes the pager completely when it runs the reload.
Thank you very much for any help.
As long as I see, this is a bug in bxSlider, in fact, when you call the reloadSlider method, internally are called the methods destroySlider and init.
In the destroySlider method the pagerEl element is destroyed, this is right if you are not using a custom one, because it is recreated programmatically in the init method, but if you are using a custom one it can't be recreated programmatically.
I ended up modifying the destroySlider method to check if a custom pager is used, in this case it must not be deleted.
Here is the before (line 1294):
if(slider.pagerEl) slider.pagerEl.remove();
And after:
if (slider.settings.pagerCustom === '') {
if(slider.pagerEl) slider.pagerEl.remove();
}
I'll post the bug on GitHub as soon as I have the time.

Replace images in PhotoSwipe gallery

I have a PhotoSwipe gallery on my page which is created programatically like this:
var instance = window.Code.PhotoSwipe.attach(image, options)
Now I want to update the images in the gallery, or put a new gallery in the same spot.
Creating a new gallery for the same DOM Element omits the following error:
Code.PhotoSwipe.activateInstance:
Unable to active instance as another instance is already active for this target
Detaching the instance from the Element using Code.PhotoSwipe.detatch(instance) didn't help either.
Any ideas how to fill the gallery with new images, or remove it, so I can create a new one in the same place?
The only way I found to avoid that error was calling unsetActivateInstance before detatch:
window.Code.PhotoSwipe.unsetActivateInstance(instance);
window.Code.PhotoSwipe.detatch(instance);
you can also hide the current active instance, instead of detatching it by calling
window.Code.PhotoSwipe.activeInstances[0].instance.hide(0)
I tried all the suggestions above but none of them worked well.
So my solution was to simply never create the gallery for the same ID twice:
instance = window.Code.PhotoSwipe.getInstance(myuniqueid);
if (window.Code.Util.isNothing(instance)) {
// Only initialize if there is no gallery with this ID already.
myPhotoSwipe = window.Code.PhotoSwipe.attach(window.document.querySelectorAll(galleryimagesselector), {captionAndToolbarAutoHideDelay: 0, jQueryMobile: true, preventSlideshow: true, enableMouseWheel: false, enableKeyboard: false}, myuniqueid);
}

Display a chart in a pop-up/modal on mouse click (jquery?) without loading chart first? (mvc3/razor)

I'm using the FileStreamResult (or FileResult) method to display a chart on a razor view page (from a Controller action) and this works as expected.
However, I'm wondering if it's possible to display the chart ONLY when an html element is clicked.
e.g. Click on an element, display chart in modal pop-up.
I can get a modal to display using Jquery...but ONLY if I have already loaded the chart into a div.
I'd like to have the page load without the chart (for performance reasons), and then only generate/load the chart when the is clicked.
I guess I need an Ajax call of somekind...but I'm a little stuck as to how to proceed and googling didn't return anything useful (just lightbox for photos)
Pseudo Code:
HTML:
<img src='small chart icon.jpg' alt='click me to see chart' id='showchart'/>
<div>
rest of page goes here...
</div>
C#:
public FileStreamResult GetChart(){
//generate any chart
return FileStreamResult(newchartstream, "image/png");
}
JS:
<script>
$(document).ready(function(){
$('#showchart').click(function(){
//make ajax call to generate chart
//show in modal with "close" button
//OR
//open a new page as a modal?
});
});
</script>
EDIT
Clarification:
Controller generates a ViewModel (from an EF4 model) which contains the results of lots of calculations, and some "summary" rows (totals, averages etc)
View displays the results (ViewModel) as tables.
Requirement:
Click on one of the summary rows, opens modal window displaying a chart for that summary row.
Would like to avoid sendind the parameters for the ViewModel and re-generating it from scratch (doing all the calcs again etc) for two reasons
1) The figures in the back-end db may have changed...so the chart doesn't reflect whats being shown in the tables.
2) It takes time to do the calcs!
I'd also like to ONLY generate the chart if the row is clicked, as opposed to loading the chart always and hide() show() with jquery.
I've thought about an ajax call, but unsure about how to return an image, or how to open a new page.
Can't see a way to pass a complex model in the Url.Action() method.
Think caching may be the best option, and have the click method call "old fashioned" javascript for a new window, passing over the parameters to get the object from cache?
You have many ways to do that, but here is what I would do.
1/ Create an action which returns a tag with the good src (assuming that your controller's name is ChartsController).
public ActionResult GetImage(int chartId = 0)
{
var image = #"<img id='chart' src='" + Url.Action("GetChart", new {controller = "Charts", chartId = chartId}) + #"'/>";
return this.Content(image);
}
2/ I assume that, in your view, you have a div somewhere which contains your modal's content (like jQuery-ui would do) with an img inside, for the chart.
<div id="modal-div">
<div id="chart-div"></div>
</div>
3/ For every row, you have to create an Ajax link who will call your "GetImage" action and replace "chart-div" with your . You can specify a "OnBegin" Javascript function, this is where you will put your code to launch the modal.
#Ajax.ActionLink("Show me the chart!", "GetImage", "User", new { chartId = #Model.Rows[i]}, new AjaxOptions()
{
HttpMethod="GET",
OnBegin = "showModalWindow",
UpdateTargetId="modal-div",
InsertionMode = InsertionMode.Replace
});
Everytime you will click on an Ajax link, the modal will be launched and the inside will be replaced (in fact, all the content of the modal will be replaced).
Don't forget to include "Scripts/jquery.unobtrusive-ajax.js" and "Scripts/jquery.validate.unobtrusive.js" for the Ajax links to work.
You have some difference question mixed in one. You should split them each in one question. For your question's title, -loading an image by AJAX- you can use code-snippet below:
HTML:
<div id="chartholder"></div>
<a id="showchart">Show the chart</a> <!-- or any element else you want to fire show event -->
JS:
$(document).ready(function(){
$("#showchart").click(function(){
// Put your controller and action (and id if presented) below:
var file = "/YourControllerToGetChart/GetChart/id"
$("<img />").attr("src", file).load(function () {
$(this) // the loaded image
.css({"some-css-you-want":"some-value"})
.appendTo($("#chartholder")); // fixed syntax
});
});
});
Let me know if you have any questions or need clarifications on any part or you want to know how to css the div id="chartholder" to display it as an modal. Cheers.

Categories

Resources