Changing text colour with JQuery alongside scrolling code - javascript

I have a page in which the user can click on a date in the sidebar, which automatically adds that date to a form, and also scrolls down to the form using AnimateScroll.js. This works fine.
I also have a button in the main part of the page that, when clicked, again uses AnimateScroll to scroll up to the top of the list of dates so the user can click their desired one. This too works fine, but what I'd like to do is also highlight the paragraph above the dates list in red so the user clearly sees what they're supposed to do. AnimateScroll is called like this:
<a class="button" onclick="$('#dates').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});">Book Now</a>
I'm sure I should be able to add something else to the code executed onclick, probably jQuery, but I don't know what that is. Can you help?

There are several ways to do this. One quick way is:
Just embed this line of code there
$('#dates').css('color','red');
(In case the container where the date appears has the id 'dates', otherwise check the class or id of the container and change the selector accordingly).

Give an id to the paragraph Say id="Paragraph" <p id="Paragraph"> Please chhose the date</p>
Now, Add a line in your onclick
<a class="button" onclick="$('#Paragraph').css('color','red'); $('#dates').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});">Book Now</a>
This will acheive what you want..!!

for maintanance it would be MUCH nicer to write the javascript in an external javascript file. also for many buttons you don't need to write the onclick every single time you can just have it at one place
<a class="button" href="javascript:;">Book Now</a>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.button').on('click',function(){
$('#dates').css({
'font-size' : '10px',
width : '30px',
height : '10px'
});
$('#dates').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});
});
});
</script>

Related

CSS Grab an Element's position

Hey everyone can someone show me how I would be able to grab an element's current position?
Doesn't do much. All it demonstrate is a button click and grabs the item I want references.
I want to be able to grab it's current position so when I click a button i can display something on top of it.
https://jsfiddle.net/Lkmjzy9d/ignore this <code block> apparently this needs to be here when displaying a jsfiddle link??? idk....
If you don't want to use jQuery, you can use
element.getBoundingClientRect().top
You can get an elements position using jQuery position()
Check the following code snippet
$(document).ready(function(){
var element = $("#Randomitem");
console.log(element.position());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="myFunction()" id="myButton">Click Me</button>
<span id="Randomitem">Random Item</span>
Hope this helps
CSS isn't a scripting language. Therefore you'll need to use something like jQuery or ReactJS.

Content popup box called by href

I use Wordpress and I would like to have a plugin that allow me to open a box/popup content for "a href" call.
Something like this:
Text use it in a div tag
this is the code i use:
<div class="tracklist download-button2" style="display: initial-block">
<a href="#">
<span class="header-clip2">
<span class="header-triangle2"></span>
</span>
<span class="header-bg2"></span>
<div class="clear"></div>
<div class="file-icon-inner2">
<i class="icon-download2"></i>Tracklist
</div>
</div>
please check http://af-sound.ro "Tracklist" button
so whoever will click on Tracklist, i would like to have a box popup opened with the content inside.
There will be more "tracklist" buttons, so i dont need just a global popup box. I have tried with Anything popup but that doesn't work as it use a shortcode like: [anythingpupup=id1] which cannot be used in "a href" call
The first issue here is that you are missing the closing anchor tag
Secondly, you should give the box which you'd like to open an "id" attribute.
<div id="popup-box"></div>
Wherever you place your anchor tag, you can then reference the box using
Click to open popup
The "#" will refer to the id attribute of the matched element.
There is no need to install an entire Wordpress plugin. You can use something like Bootstrap Modals
The instructions are very straight forward to help you set it up.
I think you don't need a plugin for that. You could use just javascript to open such popup from an anchor. Here is an example code:
Open Popup!
<script language="javascript">
function Popup()
{
var win = window.open('', '',"toolbar=no, width=100, height=20");
var doc = win.document.open();
doc.write('<html><body> <b>Hello!</b> </body></html>');
doc.close();
}
</script>
As you can see, you can add any dynamic html as content of the popup, including the html that you want in the doc.write method.
Cheers!
There are a number of ways of achieving this, depending on the result you want to get.
Maybe the simplest way is not using a plugin at all; just add a hidden div with the content of the popup in it. And then, from jQuery, capture the click of your tag a and show up that hidden div. From CSS you can style that div in any way you need.
If you want to use a plugin, you could use Fancybox or any other similar, given the fact that you already have jQuery on your website.

How to change the contents of a div with a link click?

Here is a (Modified) jsfiddle of my webpage. It has quite a bit more, and the positioning is correct, as opposed to this: http://jsfiddle.net/ry0tec3p/1/
About
Questions
Tutorials
Social
I'm trying to make the slightly transparent black area in the middle of the webpage (the "center" div.) change html when I click on one of the links above(which look like a few tabs on the webpage), and I want the tab to stay selected until another is clicked. It can't be just the text, because different tabs will have different HTML. Could somebody edit the jsfiddle, or show me how to, to make this happen?
EDIT:
I've tried using:
$(".btn1").click(function(){
$(".center").load( "file.html" );
});
which did nothing at all.
also, I have looked into inner HTML, but my attempts at implementing it into this have failed because I'm ignorant.
If you attempt to run this locally it you may find it will not work, you must have this on a live server. And on the same domain as the files you're calling for
This is jQuery so make sure you have a script tag linked to jQuery!
HTML
<button id="home" class="Navigation">Home</button>
<button id="about" class="Navigation">About Us</button>
<button id="contact" class="Navigation">Contact Us</button>
<div id="PageData">Data Will Display Here</div>
jQuery
$(document).ready(function(){ //All jQuery should go in this ready function
// Onclick function
$('.Navigation').click(function () {
// this.id = to the ID of the element being clicked
$('#PageData').load(this.id+".html");
});
});
All you need to do it work this into your existing source code.
You can apply the class="Navigation" to any element you want to use to fire the function but it will use the ID of that element to load the page.
Example a button with the id of cars will try load cars.html
I hope this helps. Happy coding! :)
WORKING DEMO!

jquery to add one cell without refreshing the page

I want to add one cell in a section each time I click the add button. The page is updated without refreshing.
The html code is:
<section>
<p class="cell">content</p>
</section>
<button type="button" id="addCell">add</button>
How should I implement the js?Thanks!
Very simple, use append() or after(). In your case append() will work better.
$('#addCell').bind('click',function(){
$('section').append('<p class="cell">content2</p>');
});
Unfortunately I can't show you a demo because jsFiddle is under maintenance.
Demo in jsbin: http://jsbin.com/agosap/
I won't give you the code as you haven't shown us what you've attempted, but I will guide you.
You want to bind a click event to the button so you can do stuff when the user clicks it. You can create elements using JS document.createElement or using jQuery. So inside the click event, create the element you want, give it whatever attributes you want, and then append it to the parent div.
$(document).ready(function() {
$("#addCell").click(function() {
$("section").append('<p class="cell">content</p>');
});
});

JavaScript anchor- access to id on another HTML page

I have two html pages, when you click on something on the first html, it will go to the second one. What I want to do is to show text according to what you clicked on the first html. different texts are wrapped with different ids. Here's how I wrote:
I'm expecting to see two.html load the text with id "one", but it doesn't work, does anyone know what I did wrong?
Here's the code on second page:
<ul id="menu" class="aaa">
<li><a id="one" href="#">one</a></li>
<li><a id="two" href="#">two</a></li>
<li><a id="three" href="#">three</a></li>
</ul>
And I have a JS file to modify each id:
$("one").observe('click', function() {
$('Pic').writeAttribute('src',"picone.jpg");
$('Bio').update("texthere!");
});
Same for two and three.
Right now if I click on a button on the first page, it will always show
the text and pic for "one", no matter which button I click.
But I want to see the pic and text for "two" if i click on it.
What you want to do is simulate a click on your anchor when the page loads. Since you're using jQuery, the simplest approach (but far form best) would be the following:
$(window).observe('domready', function () {
$(location.hash).click();
});
attach ondomready-event to window. Fetch element with id=one (with jQuery this would be '#one', same as your location.hash would be, very handy in this case), trigger a click on it.
You might need to replace $(location.hash).click(); with $(location.hash).get(0).click() since jQuery tend to return arrays of jQuery-objects.
But a better solution in your case would be to have an event-handler that you can trigger manually, thus circumvent the need of firing events, aswell as drop the anchors and put onclick directly on your li's.
And furthermore, why do you load a second page when all you seem to want to do is to show/hide content dynamically? Do it on the same page...
the #blastuffbla is not an ID but the location hash.
You can acces it by using:
self.document.location.hash
which would return #hash, if you would only want hash you would use:
self.document.location.hash.substring(1)
Hope this helps
tags do not have id's but names to handle the anchors in Urls, you will still need the ID to manage them in JS though.
So your list should be:
<ul id="menu" class="aaa">
<li><a id="one" name="one" href="#">one</a></li>
<li><a id="two" name="two" href="#">two</a></li>
<li><a id="three" name="three" href="#">three</a></li></ul>
Your javascript seemed correct though.
When you say "different ids" how are you setting up your anchors on the 2nd page? The anchor on the 2nd page should look like this:
<a name='one'></a>
Put this right above the text that you want to mark on the 2nd page.
Do you want to scroll the page to the positon of the id "one"? Maybe the content of the page is too small that you cant scroll there. I mean sometimes the browser cant move the element marked with the id to the top of the canvas and looks like it doenst scrolled there. Try to include enough space after the element to make it scrollable to the top of the browser.
Hope that helps.

Categories

Resources