I'm using Foundation 4 Joyride plugin but I need it to start (and re-start) once a user clicks a certain button on my UI, but I'm not being able to do so. By following the code presented on Zurb's site I'm only able to run it when the site first runs.
The docs for Joyride are here:
http://foundation.zurb.com/docs/components/joyride.html
and my init code is here
$(document).foundation().foundation('joyride', 'start', {template : { // HTML segments for tip layout
link : ' ',
timer : '<div class="joyride-timer-indicator-wrap"><span class="joyride-timer-indicator"></span></div>',
tip : '<div class="joyride-tip-guide" style="background: white; color: black; margin-top: -27px; margin-left: 2px; border-top: 1px dashed #c1c1c1; width: 100%; max-width: 457px;"></div>',
wrapper : '<div class="joyride-content-wrapper" style="background-color: white; color: black; padding: 4px; "></div>',
button : ''
}});
I bumped up against this as well. What you need to do is wrap the tag inside of a with an ID, and then call the joyride start command against that.
For example, the markup might look like this:
<div id="joyrideDiv">
<ol class="joyride-list" data-joyride>
<li data-id="joyridedElement"><p>Here's the explanation</p></li>
</ol>
</div>
And then you can start just that joyride by calling foundation (this is key) against that div only. The call would look like this:
$("#joyrideDiv").foundation('joyride', 'start');
Note that you're passing the ID of the wrapper div, not the ID of the element. I had to poke around in the source to figure that out.
You can also just launch joyride if you set the autostart property to true. To make sure you clear all previous joyride tours, if you switch between a few tours, you can clear the previous tours by calling the destroy function.
jQuery(window).joyride("destroy");
jQuery("#ot-introduction").joyride({autoStart: true});
Related
I have two HTML document, home.html and courses.html
home.html has 4 links each representing(linked) to a part of code(div) on courses.html
What I want: When a link is clicked on home.html and it is redirected to a specific part of courses.html then that part should glow (maybe by box-shadow) to attract reader's attention.
home.html(rough view)
courses.html(roughly showing effect I want)
PS: I'm just a beginner and I know only HTML, CSS, Javascript so if this effect is possible using these languages then it will be really great. If not, then pls make me understand that code.
Thanks
You can use the :target pseudo class on the intended sections in the 2nd page. Note that the anchor name (the hash after the #) is identical the target element id.
The example works on a single page, but the principle will work on 2 or more pages as well.
div:target {
border: 2px solid pink;
}
<!-- source page -->
Go to 1
Go to 2
Go to 3
Go to 4
<!-- target page -->
<div id="section1">Example 1</div>
<div id="section2">Example 2</div>
<div id="section3">Example 3</div>
<div id="section4">Example 4</div>
Well, you can use the location.hash.
When redirecting the user to the courses.html page, redirect to an URL with a hash parameter in the URL. for example: /courses.html#link1.
Then, ON the courses.html page, add this script:
$("#"+location.hash).css('box-shadow', '0 5px 5px #08c1c6');
I'm using jQuery for better readability. What it does is simple: Adds box-shadow to the element which has the ID of the URL hash parameter.
You should add an ID attribute to the divs you want to mark, and then the script will add box-shadow according to the # parameter in your URL.
Javascript version for the code:
document.getElementById(location.hash).style.boxShadow = "0 5px 5px #08c1c6";
Make the link like
home.html
Go to something
*say you want to highlight an element whose id=something
On courses.html page run a function on document ready to check for any highlights.
JQUERY:
$( document ).ready(function() {
CheckForHighlight();
});
function CheckForHighlight(){
href = window.location.href;
values = href.split('?')[1] // Remove the url
highlight = values.split('=')[1]; // Grab the second parmeter
$('#'+highlight).addClass('highlightedElem');
//highlightedElemclass has box shadow or border
}
CSS:
.highlightedElem{
box-shadow:0px 0px 10px blue;
border:1px solid blue;
}
If I understood correctly, css box shadow for a:hover is enough on this
This is css part
a:hover {
text-decoration: none;
box-shadow: 2px 2px 2px 2px red;
}
This is the html part
for a link 1
a:hover {
text-decoration: none;
box-shadow: 2px 2px 2px 2px red;
}
for a link 1
for a link 2
for a link 3
for a link 4
I have been debugging this issue for a good while now and I am so confused to why this isn't working.
As you can see I am running the following code on JSFiddle and it seems to work without any issues at all:
$(".assistance-submit-btn").hover(function() {
$(this).children('i').toggleClass("assistance-submit-btn-mouseover");
});
.assistance-submit-btn {
font-size: 1.4rem;
font-weight:300;
padding: 10px 20px;
background: none;
border: 2px solid #333;
border-radius: 10rem;
color: #333;
margin: 25px auto 0;
display: block;
}
.assistance-submit-btn-mouseover {
transform:translate(10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="assistance-submit-btn" value="Submit">Submit <i class="fa fa-caret-right"></i></button>
As you can see when the assistance-submit-btn element is hovered it will add a class to the i element.
This code is a direct copy from my local website that I am developing however for some reason on my local system it will not execute when the assistance-submit-btn element is hovered.
So far I have tried adding a CSS hover to the element itself just to see whether or not the element was behind another element and unable to hover.
The only difference that I can think of on my local setup is that the assistance-submit-btn element is pulled in by AJAX. Could this effect the jQuery hover event? Any suggestions to why this might be happening would be much appreciated.
Thanks
UPDATE: Forgot to mention I am getting no errors within my console.
Yes, it's because of Ajax dynamic content. Use this code:
$(document).on({
mouseenter: function () {
$(this).children('i').addClass("assistance-submit-btn-mouseover");
},
mouseleave: function () {
$(this).children('i').removeClass("assistance-submit-btn-mouseover");
}
});
I'm making a jquery mobile app and have a page that needs to filter some posts.
I have the posts put in as well as the design of the filter.
You can see what it looks like below:
I've been trying to animate it so if the user presses "social" on the right, "outside" and "business" will get pushed out to the left so the filter you have selected is always in the centre, between the two dividers.
Here's an example of the sort of js I was going to use to move the divs around but just for 1 div instead of 3:
$(function(){
var c=0;
$("#click").click(function(){
$(this).stop().animate({left: ++c%2*100 }, 'fast');
});
});
The problem i was having is that if the user was to press the button on the right or left every time it would need to have an infinite number of divs sliding in and I was just wondering how to implement this.
Here's a jsfiddle with the assets I'm using (Without the jquery mobile styling)
https://jsfiddle.net/xczy346z/
EDIT: Here's also a gif of what I want to happen if you can't understand what I'm trying to make. Example Gif
Use this javascript
$(document).ready(function(){
$("#social_one").click(function(){
$("#side_scroll").animate({marginLeft: '-=130px'}, 500);
});
});
`
Theoretically, may I suggest that you remove your dividers (#divider_***), both from the html and css, and add them as a pseudo on the text_slider like this
#text_slider:after {
content: "";
position: absolute;
left: 33%;
top: 10%;
bottom: 10%;
width: 33%;
border-left: 1px solid white;
border-right: 1px solid white;
pointer-events: none;
}
Doing like this keeps the side_scroll clean and only the "buttons" to work with when animate.
Now you can simply just animate your side_scroll to right or left having the selected "button" in the middle no matter how many they will be.
Here is an updated fiddle of yours showing the pseudo:
Ok, so here is my problem:
I am making this Tumblr theme, so I can only have one html, which means I can't use the typical method of adding an id to each body. So I thought about it and concluded that I need 5 javascript codes that each checks the url on which I am currently and if I am f.ex. on http://whatchoodo.tumblr.com the li #home will have border-bottom: #6DC176 solid 3px; , color: #6DC176; and font-weight: bold;
Basically I have it all thought out, but I don't know a way to check if url = sth .
Here's the temporary link to the page if it helps you visualize what I want:
http://whatchoodo.tumblr.com
I am using ajax to load a new post in wordpress. Here is the basic code:
function test(){
var menuitem = document.getElementsByTagName('nav')[0].childNodes;
for(var i= 0; i < menuitem.length; i++)
{
bindEvt(menuitem[i], "click", loadajax);
}
};
function loadajax (event) {
event.preventDefault();
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
var content = document.getElementsByTagName('article')[0];
if(xhr.readyState == 4){
if(xhr.status == 200) {
content.innerHTML = xhr.responseText;
} else{
content.innerHTML = 'Cannot connect to server. Check your internet connection'}
}
};
xhr.open('GET', this.href, true);
xhr.send();
}
bindEvt(window, "load", test);
It works fine, only it loads the entire new post with menu, header, footer, etc...
I only need the content and the comments. Is there any way using ajax to specifically ask wordpress for those contents or is the only way possible to do this to get the entire page and then extract only the content I need out of it and repost it?
Maybe make a specific template page for it? but how would I go about getting that working.
I hope I have been clear. Please tell me if not! First attempt at a Wordpress Theme/PHP.
Thanks for your help!
You could use a template, but you'd need to write your own and it'd get a little fiddly. Andrew M.'s comment about a jQuery solution is correct, as are you: you would still be downloading the entire document, but you could only insert the part you want quite easily. See the section on loading page fragments for more details, but for the sake of expedience:
$('#result').load('ajax/test.html #container');
would load test.html and insert the contents of that document's #container element into the #result element on the parent page. Easy as pie.
This will, of course, result in as much server load and cost as much bandwidth as fully rendering the source page, though fortunately images and such will only be loaded if they're part of the rendered section. This overhead shouldn't be anything to worry about unless you have a massive amount of traffic, however.
Let's say that you want the server to just send the data you need in the first place: how you'd go about this depends on what other needs you have of the WordPress instance.
If you need to load just one page, and you don't have humans looking at the original page directly, then it's simple - write a template that consists only of:
while ( have_posts() ) : the_post();
echo '<h2>';
the_title();
echo '</h2>';
the_content();
endwhile;
and set that template for the post in question.
But if you need people to look at the post on the source page as well, you're going to have to create a theme with a singles template as described above as well as install a theme switcher plugin, and pass the necessary mojo to invoke your machine-readable theme in your AJAX request. Which is a little complicated.
So, I came here looking for a similar solution to the one proposed by by the OP[cmplieger].
I've previously used the method described by sudowned. I made a WordPress theme like that. The page used header detection, optionally loaded the headers and then loaded the content, optionally footer.
It's a great theme and loads super fast. It's really the best method...
however...
I thought it'd be great to have something that works on browser side only though, so this post inspired me to write it:
note: This is not the way I would do this.
I'd really suggest the way that sudowned suggested above.
However there may be some situations that you might have no other way,
Soooo....
/* requires jQuery */
// some assumptions:
// you are using jQuery
// the pages you are calling are inside
// the same domain as the page calling them.
//
Slice of HTML
<div id="content">
<div id="list">
<ul>
<li name="//fiddle.jshell.net/isme/j4ygp3nn/show/">Page 1</li>
<li name="//fiddle.jshell.net/isme/gmvj0ohg/show/">Page 2</li>
</ul>
</div>
</div>
A splash of CSS:
#list ul { list-style-type: none;}
#popc { margin-top: 20px; margin-left: 20px;}
#list ul li { text-decoration: underline; color: #343434;
margin-bottom: 5px; cursor: pointer;}
#popcontent { background: #ffffff; border: 1px solid #000000;
width: 80%; min-width: 80%; margin-left: auto;
margin-right: auto; height: 80%; min-height: 300px;
position: absolute; display: none; top: 10%; left: 10%;
border-radius: 12px;}
#x_it { text-align: center; float: right; width: 17px; border:
solid 2px #000000; color: #000000; background: red;
border-radius: 12px; padding-left: 0px; padding-right: 1px;
padding-top: 2px; padding-bottom: 0px; margin-right: 10px;
font-family: sans-serif; font-weight: bold; cursor: pointer;}
Spread a liberal layer of jQuery:
jQuery("#content").after("\
<div id=\"popcontent\">\
<p id='x_it'>X</p>\
<div id='popc'></div></div>");
popc = jQuery("#popc");
popcontent = jQuery("#popcontent");
jQuery("#x_it").click(function() {
popcontent.fadeOut("fast");
});
jQuery("#list ul li").click(function()
{
popc.html("");
popc.load(jQuery(this).attr("name") + \
" #main_content");
popcontent.fadeIn("fast");
});
`
I posted a working demo on fiddle:
https://jsfiddle.net/isme/jjok5kus/34/
The real trick here is in the load call.
the second argument is "#main_content". This tells the load function to only load that element in to your chosen div.
See the manual for jQuery.load()