I found this carousel on apples website where it has the 3 radio presenters, and was wondering how i could create this effect or if there is a carousel like this available.
I did some research and found a similar stackoverflow question which links to slick.js so I am wondering if apple use slick and have customized it to do this or they found a new carousel that makes this effect occur.
From inspecting the carousel i found the class zine-gallery-content but searching that didn't help.
Does anyone know how i can make this carousel? It is also responsive.
It looks custom to me. They've called it 'ac-gallery' within their code. They tend to prepend things with ac-, ac-analytics, etc.
I'll let you know how I figured this out. I inspected the slider and was looking for a wrapper class or ID with the words 'gallery', 'carousel', 'slider' or something similar. I noticed the carousel contained the ID #zine-gallery. I then looked for one of their javascript files that looked like the primary file where most of the code is compiled to. I found a file called main.built.js. I opened this file and searched for zine-gallery, which did exist. I then opened my web inspector, opened the "Sources" tab and found main.built.js. I then clicked the "Pretty Print" button (The {} icon next to the line and column number. This formats the uglified javascript and allows you to read it more easily.
The following leads me to believe it's custom:
this.gallery = B.create({
id: this.galleryId,
el: this.wrapper,
section: this,
model: this.slides,
triggerSelector: this.triggerSelector,
trigger: {
events: ["mouseover", "click"]
}
})
Usually a plugin would include it's name in the creation process. Also, right below the following gallery methods are defined:
C._removeActiveStates,
C._animateNewStation,
C._blendToNewBackgroundColor,
C.activate,
C.deactivate,
C.animateIn,
C.onRequestAnimationFrame,
C.onScroll,
C.onResize, etc.
Related
OK, I am baffled on how to get Bootstrap 3 Tooltip working.
Bootstrap Tooltip "instructions"
http://getbootstrap.com/javascript/#tooltips
Says to trigger using:
$('#example').tooltip(options)
then HTML to write
Hover over me
No matter what I do, I cannot seem to get it working. There is no ID named example in their example, and adding said ID does not work (I wrap the script in a script tag and have added it before and after the anchor).
But, after looking around on Google, I found the following code, which when added makes the Tooltip work as it should.
$(function () { $("[data-toggle='tooltip']").tooltip(); });
So, my question is, How the hell do I get it working with the provided Bootstrap code! What am I missing? They really need to work on their instructions. This should not take this long to figure out when it should be simple!
I was able to recreate this in a fiddle. Check the console on your browser if you are getting javascript errors. Looking at the code you have provided though it hits me that you might be mixing two things together. The options need to be defined in your javascript code and not in HTML, like this:
$(document).ready(function() {
var option = {
title: "example",
placement: "bottom"
};
$("#example").tooltip(option);
});
Well, this is about how to read the document of bootstrap.
$('#example').tooltip(options)
just presents how to use the jquery method, and it is not right for the following html:
Hover over me
The method must be called in order to active the tooltips plugin. So, in order to make the html working with the plugin, you need to do two steps:
add an id into the html, say,
Hover over me
call the jquery method,
$('#tips').tooltip(options)
This is a page I'm currently working on as a project
$(function() {
$(".modal-launcher, #modal-background").click(function() {
$(".modal-content, #modal-background").toggleClass("active");
$(".vid-1i").attr("src", "link1");
$(".vid-2i").attr("src", "link2");
$(".vid-3i").attr("src", "link3");
$(".vid-4i").attr("src", "link4");
$(".vid-5i").attr("src", "link5");
$(".vid-6i").attr("src", "link6");
$(".vid-7i").attr("src", "link7");
$(".vid-8i").attr("src", "link8");
//$('html').toggleClass('active').css('top', -(document.documentElement.scrollTop) + 'px');//
});
});
above the actual links are replaced just to display a quick idea of the bad jQuery.
In it, I am attempting to create my own popup launcher for videos; however, I am having trouble using jQuery to replace the "" src of an iframe element to a YouTube link. I am unable to figure out why the jQuery is not working. I understand that the jQuery is, of course, working properly, and that it is me who has written the code incorrectly, but here I am asking if anyone is able to figure out what it is I've done wrong, or what can be changed to make it work.
For some reason, the last video in the jQuery list is always the one retrieved.
Understand that the images are missing from the page due to them being local files and not network locations. Clicking above the captions that read like "Match One" will have the "intended" result, regardless if the image is showing or not.
Coming back to this and understanding more of JavaScript and jQuery, my problem was simply misunderstanding the code. In order to do something like this, one function per link would be more suitable.
function video1()
{
$("#popup, #modal-background").toggleClass("active");
$("#popup").prop("src", "https://www.youtube.com/embed/7h1s15n74r3all1nk");
document.getElementById('scroll').style.cssText ='overflow:hidden';
}
complementary html would look like this:
<div onclick="video1()"></div>
The previous code would run each line, effectively setting the last link as the source of the element. The new code is button independent, ensuring only one link belongs to each button.
I'm using Processing.org looking at the example variableInputs in javaScript mode (can't find it online, but it is included with the download)
It has two tabs, one java and one .js. And a cool example on how to pass data around both.
In the first tab there are some HTML/CSS commented out. Those are building the page when I hit run...
How's that working?
Is it possible to have for instance more than one drop down menu (selector) side by side? I managed to have them, but always one below the another.
Is the way to go to edit the html in the first tab?
help?
do you need me to copy and paste the example here?
[EDIT]
When I hit export, the PDE exports:
index.html
processing.js //(the library it self)
interface.js //(the second tab in the PDE)
sketchName.pde //(the usual pde)
The html tags from above the code are included in index.html, so it can be edited there. Not sure though this is inserted in the html page. So putting the menus side by side turns out to be a HTML question I think... What i also don't know how to do :), but I'll look for it
[edit2] or perhaps a javaScript question... As is interface.js that is making th econtrols... How to control the position of them?
[edit3] well tuns out that the line
<form id="form-form"><!-- empty --></form>
is doing the link, via th id form-form...
Still is it possible to have some menus side by side inatead of one below another?
It is indeed a css/html issue as bfavaretto suggests. In order to do what you asked for try this:
style section in comments (java tab), essentially you have to make the two drop downs' width smaller (45%) and then css hacks to bring them inline, float:left or right
* <style>textarea,input,label,select{display:block;width:95%}select{width:45%;clear:none;float:left}
* input[type=checkbox],input[type=radio]{width: auto}textarea{height:5em},</style>
setController() method, add another ctrl.addMenu(); as such:
element = ctlr.addMenu( "theMenu", menuItems );
element = ctlr.addMenu( "theMenau", menuItems );
The problem after this is that the two labels block the two menus from coming in-line thus you probably have to remove them from these elements and add them manually. In the javascript tab comment out line 157:
//form.appendChild(label);
This line is in function this.addSelection = function ( l, o ) {
I'm using the following theme for our site: http://themes.vivantdesigns.com/vpad/#dashboard.html
I want an ajax loader to show NEXT to the link/tab, when a user clicks a link within the drilldown menu on the left. As you can see from the link, content is dynamically loaded within a:
<section id="main-section">Pagename.html loaded here</section>
So basically, I want the ajax loader to show to the right of the menu links and disappear when the dynamic content loads. It will be hard to see this pause on the demo link, but heavier database queries will cause it to sit there a moment, and slower connections of course.
Any immediate help is appreciated very much.
I've tried show/hide onClick methods, hiding class on document ready, and nothing seems to work cleanly.
Okay, after a lot of screwing around trying to find where the ajax was happening, I think I've worked it out (little familiarity with jQuery/never heard of hashchange or bbq before), so give this a shot.
Assuming you have access to it, the page you referenced is including a JavaScript file called global.js.
Add an initially hidden "loading" image/div/whatever next to each menu item, with an id set similarly to the menu item's name e.g. id="mediaLoading".
Open global.js and head down to line 117:
$('#'+id).length && $('#'+id).remove();
After this line the ajax call is made, so add the code to show the ajax loader, e.g.
var loaderId = h.replace(/^\#/, "") + "Loading";
document.getElementById(loaderId).style.display = 'block';
//or $("#" + loaderId).show() or whatever you would use in jQuery
Finally, to re-hide it, add similar code into the inline 'complete' function (which would now be around line 127):
complete: function(jqXHR, textStatus) {
document.getElementById(loaderId).style.display = 'none';
}
Hope that solves it. It was difficult to test locally.
Keep in mind that since the file's called "global," that obviously might impact a bunch of other pages, so you may want to use null-checks for the loader or a separate file...
I'm currently working on a website for a Danish company. The content is all in one page and I've included some jQuery-scrolling and stuff. Works nice!
For the menu I'm asked to programme the elements so the active element is bold. That I've done too.
The problem comes here:
The client wants a home button and a next and previous button. But when I click them and the page scrolls the CSS-classes do not change for the active element - so the bold element in the menu is still the last clicked page.
I hope that anyone can help.
The page can be seen at:
http://vedelform.dk/new/intro/
In addition to calling the serialscroll plugin, the event handler for the images needs to update the appropriate class name on your navigation link. When you click on a navigation link directly, you call the changeActiveStates function, but that isn't happening with the home, next, and previous buttons.
You should use the onBefore attribute of the serialScroll plugin to define a method that will figure out which navigation link is supposed to receive the class name. It can then call the changeActiveStates function.
It doesn't look like it would take more than a few more lines of code to fix your problem. If you need more help getting it to work, let me know.
edit:
If you add this (starting at line 84 of init.js), you should be in business:
easing: 'swing',
onBefore:function(e, elem, $pane, $items, pos){
if ((pos >= 0)&&(pos < $('ul.navigation > li > a').size())) changeActiveStates($('ul.navigation > li > a').get(pos));
return true;
}
You will then need to call changeActiveStates (probably after you initialize the function) on page load to initialize the correct menu item.
I hope that helps; let me know if it gives you any more trouble.
You used minified version of scripts so it is very hard to debug the code. Also you didnt give us name of plugin you use. I think there is a bug in plugin. Because css class "selected" sould jump from one menu item to another.
#Jason Francis:
You're probably right. I'm not that much into jQuery and Javascript and what I've done so far is more luck than it's knowledge. I did A LOT of trial and error.
I understand what you're saying about getting the serialScroll plugin to figure out what element to call changeActiveStates on - but I seriously don't know how to do that.