So i created a simple html page :
index.html file:
<html>
<head>
</head>
<body>
<div class="menu">
hello
</div>
<div class="test">
Menu
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
here is the app.js file:
var main = function() {
$('.test').click(function(){
$('body').animate({
left: '500px'
},200);
})
}
$(document).ready(main)
I'm trying to understand what i did wrong , it seems like it should work..
was also tried to download jquery-2.1.1.min.js and to work with it , but still while clicking on the menu , the text is not moving ..
You need to set position css property to body in order to work left.
body{
position:relative;
}
REF : http://api.jquery.com/animate/
Related
https://jsfiddle.net/x5ue890v/1/
I have some sticky icons on my Wordpress site but how do I hide them based on "click" on the screen. Above link show you what I want to achieve.
I add:
html,body{
width:100%;
height:100%;
}
to my theme CSS and:
function social_effect() { ?>
<script>
$('body').click(function() {
$('.ct-socials').toggle();});
</script>
<?php }
add_action('wp_head','social_effect');
to my theme "function.php" but doesn't work... Any solution?
Update
I want to hide:
<div class="ct-socials std-tab-slide">My Social Icon</div>
Here try this. I dont't have all your code but this should work. Add all your script library inside the head or on top of your functions. Let me know
$(document).ready(function(){
$('body').click(function() {
$('.ct-socials').toggle();
});
});
.ct-socials {
width:300px;
height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>
<button>Click ME </button>
<div class="ct-socials std-tab-slide">
<div>My Social Icon</div>
<div>My Social Icon</div>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
Just add this JavaScript line before the function
I would like to figure out a way to get my image when clicked on to autoplay my media player. I'm a bit new and can't figure out onclick for this matter. I suppose jquery is the way to go. So, Thanks in advanced.
<!DOCTYPE html>
<html><head><style>#leadplayer_video_element_5348CAD9E1F02
<head>
<style>
<style>
position:absolute;
left:8px;
top:8px;
z-index:-1;
}
</style>
</head>
</head>
<body>
<a href="#">
<img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/1508520_496016637195955_3564444582693127544_n.png" hight="294" width="377" onclick="this.style.display='none';" style="position:absolute;opacity:1.0; z-index:1;"/>
</a>
<!-- LeadPlayer video embed code start [ video: 5348CAD9E1F02 ] -->
<div>
<script type="text/javascript" src="//s3.amazonaws.com/cdn.leadbrite.com/leadplayer/r0034/js/leadplayer.js">
</script>
</div>
<div id="leadplayer_video_element_5348CAD9E1F02" style="width:377px;height:260px">
</div>
<div>
<script type="text/javascript">jQLeadBrite("#leadplayer_video_element_5348CAD9E1F02").leadplayer(false, "eyJnYSI6dHJ1ZSwib3ZlcmxheSI6dHJ1ZSwicG93ZXJlZF9ieSI6dHJ1ZSwicG93ZXJlZF9ieV9saW5rIjoiaHR0cDpcL1wvd3d3LmxlYWRwbGF5ZXIuY29tXC8/dXRtX3NvdXJjZT1kZW1vLXNpdGUmYW1wO3V0bV9tZWRpdW09cG93ZXJlZC1ieS1sb2dvJmFtcDt1dG1fY2FtcGFpZ249TGVhZFBsYXllciAiLCJjb2xvcjEiOiIjRjVCQjBDIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiU1VCTUlUIiwidHh0X3BsYXkiOiJQTEFZIiwidHh0X2VtbCI6IllvdXIgRW1haWwgQWRkcmVzcyIsInR4dF9uYW1lIjoiWW91ciBOYW1lIiwidHh0X2ludmFsaWRfZW1sIjoiUGxlYXNlIGVudGVyIGEgdmFsaWQgZW1haWwiLCJ0eHRfaW52YWxpZF9uYW1lIjoiUGxlYXNlIGVudGVyIHlvdXIgbmFtZSIsImxwX3NvdXJjZSI6IldQIFBsdWdpbiAxLjQuMS44IFVubGltaXRlZCIsImlkIjoiNTM0OENBRDlFMUYwMiIsIndpZHRoIjozNzcsImhlaWdodCI6MjYwLCJ0aHVtYm5haWwiOiJodHRwczpcL1wvZmJleHRlcm5hbC1hLmFrYW1haWhkLm5ldFwvc2FmZV9pbWFnZS5waHA/ZD1BUUQ1S0U0R3lkYkotY0Y4JmFtcDt3PTM3NyZhbXA7aD0xOTcmYW1wO3VybD1odHRwJTNBJTJGJTJGcGljcmVkaXJlY3QuY29tJTJGcG9zdCUyRnVwbG9hZHMlMkYxMzk3MDY2MzkyLmpwZWclM0Z2JTNENTkyMTg3NjY1JmFtcDtjZnM9MSIsInRpdGxlIjoiVmlkZXJlZGlyZWN0IFRlc3QgQ29kZSAxIiwiZGVzY3JpcHRpb24iOiJUZXN0IENvZGUiLCJhdXRvcGxheSI6ZmFsc2UsInNob3dfdGltZWxpbmUiOnRydWUsImVuYWJsZV9oZCI6dHJ1ZSwib3B0IjpmYWxzZSwiY3RhIjp7InRpbWUiOjEwLCJidGV4dCI6IkNhbGwgVG8gQWN0aW9uIC0gQ2xpY2sgSGVyZSAiLCJ1cmwiOiJodHRwczpcL1wvd3d3LnBheXBhbC5jb21cL2NnaS1iaW5cL3dlYnNjcj9jbWQ9X3MteGNsaWNrJmFtcDtob3N0ZWRfYnV0dG9uX2lkPURZVUdCRUpHVzg2U0ciLCJhdXRvX2ZvbGxvdyI6ZmFsc2UsIm5ld193aW5kb3ciOnRydWV9LCJ5bSI6IklUWlUwaTlueEdnIn0=");
</script>
</div>
<!-- LeadPlayer video embed code end [ video: 5348CAD9E1F02 ] -->
</body>
</html>
OR... Can anyone find a way to make the pic refresh in the same div using ajax and jquery? Both would be highly appreciated.
Add Jquery Lib in head section
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript">
Try this (Add inside <script>..code..</script>)
$(window).load(function(){
$('a').click(function(){
$('.player').slideToggle();
});
});
DEMO
Im a complete noob when it comes to JavaScript and jQuery but here we go.
I want to make a slidetoggle that shows 3 slides, 3 "snowboardtricks" when i press "toggle".
As it is now only one "trick" is shown when i press toggle, the rest is already there from the beginning.
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function()
{
$("#flip").click(function()
{
$("#panel,#panel2,#panel3").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#panel2,#panel3,#flip
{
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#panel
{
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Toggle</div>
<div id="panel">Switch back 1080 double cork</div>
<div id="panel2">Frontside triple cork 1440</div>
<div id="panel3">Ollie</div>
</body>
</html>
If I'm understanding correctly, on page load you only want to display "Toggle". When you click "Toggle" you want to show the three other sections.
To do that you want to place the three other sections inside of a wrapper div, and then use slide toggle on the wrapper div instead.
Quick jsfiddle: http://jsfiddle.net/43byX/
Here is a modified version of your code:
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("#toggle").click(function() {
$("#drawer").slideToggle("slow");
});
});
</script>
<style type="text/css">
#toggle,
.panel {
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#drawer {
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="toggle">Toggle Me</div>
<div id="drawer">
<div class="panel">Switch back 1080 double cork</div>
<div class="panel">Frontside triple cork 1440</div>
<div class="panel">Ollie</div>
</div>
</body>
</html>
#panel, #panel2, #panel3
{
padding:5px;
display:none;
}
You are in essence hiding only the div whose id is panel. But the other two div's are visible. Those need to be hidden as well. This way when you toggle all three will have their displays turned to true.
On a side note is there a reason you are creating your own toggle? It might be faster to use twitter bootstrap which already comes with it. See This
Correct me if I'm wrong, but it seems what you're trying to do can be more easily accomplished using accordion.
Quick jFiddle example here. Click the headers to see the effects.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
</head>
You can erase the active code if you want one of the panes to be open when the page loads, and you can erase the collapsible line if you want one of the panes to always remain open.
and then the html layout:
<div id="flip">
<h3>Switch back 1080 double cork</h3>
<div><p>some text or whatevs here</p></div>
<h3>Frontside triple cork 1440</h3>
<div><p>some text or whatevs here</p></div>
<h3>Ollie</h3>
<div><p>some text or whatevs here</p></div>
</div>
Read more about accordion here.
Edit: It may be better to put the
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
just before the closing body tag instead of in the header. Best practices would have you put it in a separate file and link it in the header.
I think, you want to toggle that one hidden element one by one. Well, If I am not wrong, then here is the code:
$("#flip").click(function(){
var targets = $("#panel, #panel2, #panel3"),
hiddenElm = targets.filter(":hidden");
hiddenElm.slideDown();
if(hiddenElm.next().length){
hiddenElm.next().slideUp();
} else {
targets.first().slideUp();
}
});
Working jsfiddle: http://jsfiddle.net/ashishanexpert/jg2wg/
EDIT: How can I extend/edit "appended content" ?
I mean, If I have a div named "website" at "include.html" (the file which I appended using jquerys load) , Can I add text / code to that DIV after appending it?
I have a simple HTML menu page which Im trying to load to every page in my website.
Sorry if its a noob question ;) kinda noob with Jquery/js/html.
Here's one of the files:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cstyles.css">
<script type='text/javascript' src='jquery-1.9.1.js'></script>
<script type='text/javascript' src='menu2.js'></script>
<script type='text/javascript' src='menu_load.js'></script>
</head>
<body>
<script>
loadContent();
$(document).on('mouseenter', "#menulist", function() {
mainmenu();
});
</script>
<div id="contact_us" style="background:blue;">Something</div>
</body>
</html>
Heres menu2.js:
function mainmenu() {
$(" #menulist li").hover(function () {
$(this).find('ul:first').css({
visibility: "visible",
display: "none"
}).show(300);
}, function () {
$(this).find('ul:first').css({
visibility: "hidden"
});
});
}
$(document).ready(function () {
mainmenu();
});
heres menu_load.js:
function loadContent() {
$("body").load("include.html");
}
Problem is: After loading the menu successfully (the html file named INCLUDE.html), The content on the page "disappears"...
In this case, the word: something wont show up.
To be more clear, it will show up for a second and then will be replaced by the content on the "include.html" file.
Any suggestions?
thanks in advance!
This happens because the way $("#body").load() works. I would suggest changing that with
.prepend()
That's because you're loading the include.html file in the entire document. You should make a element with an id and load it there. For example
<div id="toload"></div>
Then your jquery function would be:
function loadContent() {
$("#toload").load("include.html");
}
I cannot seem to get this script to work. Can anyone please help? The DIV's width is not defined. It just stretches across the whole page.
<html>
<head>
<style type="text/css">
#box{
height:100px;
border:3px;
border-style:solid;
border-color:#000;
}
</style>
<script>
document.getElementById('box').style.width="10px";
</script>
</head>
<body>
<div id="box"></div>
Your script is running before the <div> is rendered on the page. Try it like this:
<html>
<head>
<style type="text/css">
#box{
height:100px;
border:3px;
border-style:solid;
border-color:#000;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
document.getElementById('box').style.width="10px";
</script>
</body>
</html>
And don't forget to close your <body> and <html> tags.
To prove that it is, look at this example. I moved the script back to the <head> section and changed the width setting to run when the window is finished loading.
<html>
<head>
<style type="text/css">
#box{
height:100px;
border:3px;
border-style:solid;
border-color:#000;
}
</style>
<script type="text/javascript">
alert('test');
window.onload = function() {
document.getElementById('box').style.width="10px";
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
You'll see the 'test' alert message before the box is rendered.
The element does not exist on the page yet. JavaScript can not access/manipulate an element until it has been loaded in the DOM. You can overcome this by moving you <script> block to above the closing </body>. Or use an window.load event.
An example of the former using your code is here - http://jsfiddle.net/ycWxH/
if you will use jquery it is more easy to do that.
that is if you will only use jquery framework
here is the code
$('#box').height(10);
just a reminder, window.onload is fired when page fully loaded.
refer to http://www.javascriptkit.com/dhtmltutors/domready.shtml
<script>
function doMyStuff() = {};
if ( document.addEventListener ) {
document.addEventListener( "DOMContentLoaded", doMyStuff, false );
} else if ( document ) {
document.attachEvent("onreadystatechange",function(){
if ( document.readyState === "complete" ) {doMyStuff();}
});}
</script>