I want to use this script on angular project but is not working how it should, it ignores every $ line and I got just the window alert.
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
$(function () {
window.alert('test') ;
$('.genealogy-tree ul').hide();
$('.genealogy-tree>ul').show();
$('.genealogy-tree ul.active').show();
$('.genealogy-tree li').on('click', function (e) {
var children = $(this).find('> ul');
if (children.is(":visible")) children.hide('fast').removeClass('active');
else children.show('fast').addClass('active');
e.stopPropagation();
});
});
</script>
and the html code
<div class="genealogy-body genealogy-scroll">
<div class="genealogy-tree">
<ul>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="" alt="Member">
<div class="member-details">
John
</div>
</div>
</div>
</a>
.....
Related
First of all I will explain how website functions. First of all user clicks on a template and that is pulled from a database into a div. I than have a button and if that button is clicked a div from that pulled template should change a color. I will now further explain that with a code:
Template pulled:
<!DOCTYPE html>
<html>
<head>
<title>Template 1</title>
<link href="http://localhost/fyproject/public/templates/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="logo">
<button id="realButton" type="button" class="btn btn-default" ></button>
<input id="logo_upload" type="file" id="files" visbility="hidden" style="opacity: 0;"/>
</div>
<form id="form1" runat="server">
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</form>
<div contenteditable="true" id="content" class="draggable ui-widget-content refresh"><p>hlo</p></div>
<div id="comments">
<form name="forma">
<textarea name="commentUser" id="commentUser" class="refresh" cols="40" rows="5">
Comments here...
</textarea><br>
<input type="submit" value="Ready!" id="send-data" /><!--onClick="writeComment(e);"-->
<div id ="editTxt" class="refresh" contenteditable="true">
This text can be by the user.
</div>
</div>
</form>
</body>
</html>
Main page where button and template is:
#extends('layouts.master')
#section('title', 'Website Builder')
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
#section('content')
<div class= "container template_class ">
#foreach ($templates as $template)
<a class="content-link" href="{{ asset($template->file )}}">
<img id = "image" src="{{ asset($template->image )}}"/>
</a>
#endforeach
<button id="color">hello</button>
<p>hello</p>
</div>
<div id="content-link2"></div>
</body>
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
</html>
#endsection
#show
So once template is clicked it is inserted inside div id="content-link2"
Jquery:
$(function() {
$('.content-link').click(function(e) {
e.preventDefault();
$('#content-link2').load($(this)[0].href, function() {
$('#content').draggable({
containment: "#content-link2",
scroll: false
});
});
});
return false;
});
$('#h').click(function(e) {
e.preventDefault();
var code = document.getElementById('content-link2').innerHTML;
console.log(code);
});
function writeComment(e) {
var comment = document.forma.commentUser.value;
e.preventDefault();
document.getElementById('comments').innerHTML = comment;
}
document.getElementById("content-link2").onmousedown = function() {mousedown()};
document.getElementById("content-link2").onmouseup = function() {mouseup()};
function mousedown() {
var code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
function mouseup() {
var code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$(document).ready ( function(){
$('#color').click(function(){
$('#content-link2 > p').css({"background-color": "yellow", "font-size": "200%"});
});
});
And once button is pressed, whatever is inside div id="content-link2 with p tag I want to apply some css doesn't matter what it is. However now when I click a button nothing happens.
Can someone post some suggestions or solutions?
After you pull the template and render it into the div id="content-link2" call these lines again in your javascript,
$("button").click(function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
try this
$(document).ready ( function(){
$('#color').click(function(){
$('#content-link2 > p').css({"background-color": "yellow", "font-size": "200%"})
});
});
You can use :
$(window).load(function(){
$('body').on("click", 'button', function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
});
I am trying to append anchor tag in a div but unfortunately its not working:
Following is my code
$(document).ready(function() {
$('.test-inner').append('');
$('.test-image').appendTo('.new-img-holder');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="test-inner">
<img class="test-image" src="cine-sudarshan.jpg" alt="">
</div>
Your code is working even with V1.2.3
It is certainly linked to another part of your code.
$(document).ready(function(){
$('.test-inner').append('');
$('.test-image').appendTo('.new-img-holder');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="test-inner">
<img class="test-image" src="cine-sudarshan.jpg" alt="">
</div>
This my jQuery code for displaying a dropdown menu on hovering over an image. Imgbtn_Dsp is the id of the image and nav_menu is the id of the list, but it's not working.
<html>
<head>
<title>Dropdownlist Hover</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script>
$('#Imgbtn_Dsp').mouseover(function() {
$('#nav_menu').slideDown();
});
</script>
</head>
<body>
<form id="form1">
<img src="~/Image/Display.png" / id="Imgbtn_Dsp">
<div id="nav_menu">
<ul>
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
</div>
<div>
</form>
</body>
</html>
Get rid of div and modify ul like this if you want to work it properly ;)
<ul id="nav_menu" style="display: none">
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
Modify your script like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function (){
$('#nav_menu').hide();
$('#Imgbtn_Dsp').mouseover(function () {
$('#nav_menu').slideDown();
});
$('#Imgbtn_Dsp').mouseleave(function () {
$('#nav_menu').slideUp();
});
});
</script>
You can see the cod in action in this jsfiddle.
it could be done without jquery. all you have to do is define parent container of image and list set some css.
<div class="parentDIV">
<img src="~/Image/Display.png" / id="Imgbtn_Dsp">
<div id="nav_menu">
<ul>
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
</div>
</div>
now define some css:-
.parentDIV{position:relative}
#nav_menu{position:absolute;
left:0;top:99%;display:none;}
.parentDIV:hover #nav_menu{display:block}
hopefully you will find it useful
I have a little problem trying to use JQuery.
Here's the code I would like to make work on my page :
http://jsfiddle.net/ktz0f6st/
But it doesn't work on my page :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
$(document).ready(function() {
$('.timeline').hover(function() {
$(this).css('background-color', 'blue');
}, function() {
$(this).css('background-color', 'cyan');
});
});
</script>
<section id="eduandwork" style="top:20%; bottom:20%; height:100%; width:100%; text-align:center;">
<div class="container hidden-xs">
<ul class="timeline">
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="timeline-heading">
<h5 class="timeline-title"><br><br>IT MANAGEMENT BACHELOR</h5>
</div>
<div class="timeline-body">
<p>2014 - 2019</p>
</div>
</div>
</li>
</ul>
</div>
</section>
This is my code.
EDIT : By saying it doesn't work, I mean when I hover the element, it doesn't change anything.
Your script tag should look like those below:
Here is your answer:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.timeline').hover(function() {
$(this).css('background-color', 'blue');
}, function() {
$(this).css('background-color', 'cyan');
});
});
</script>
<section id="eduandwork" style="top:20%; bottom:20%; height:100%; width:100%; text-align:center;">
<div class="container hidden-xs">
<ul class="timeline">
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="timeline-heading">
<h5 class="timeline-title"><br><br>IT MANAGEMENT BACHELOR</h5>
</div>
<div class="timeline-body">
<p>2014 - 2019</p>
</div>
</div>
</li>
</ul>
</div>
</section>
At the end of your Jquery call add in an end script tag, then start a new one.
In your initial script call you specify a source "src='blah'". If you run your code inline on the page in a second script or in your page's files it will run successfully.
If you call jquery first, then run a second script with your code, your hover works just fine.
http://jsfiddle.net/mPawlak/heczLkxd/
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><script>
$(document).ready(function() {
$('.timeline').hover(function() {
$(this).css('background-color', 'blue');
}, function() {
$(this).css('background-color', 'cyan');
});
});
Sorry for being such a beginner but I spent days try to find an answer and now I think your expertise is needed.
I try to do something like "If I click on li, then the text written in li is displayed in a search box (ID '#input#) and automatically the request is launched."
My script works fine but the request/search IS NOT launched.I blocked at the last step of the process.
Thank you very much for your help.
HTML
<ul id="test">
<li>Hello world</li>
<li>Hello world 2</li>
</ul>
Javascript, JQuery
<script type="text/javascript">
$(document).ready(function(){
$("#test li").click(function (){
varindex = $(this).text();
$('#input').val("Text is in the search box!"+" "+varindex);
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#test li").click(function (){
$('#input').focus();
$('#input').trigger(jQuery.Event('key', {which: 13}));
});
});
</script>
This works:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script>
$(document).ready( function () {
$('#test li').click ( function () {
$('#input').attr("value", $(this).text ());
$('#myform').submit ();
});
});
</script>
</head>
<body>
<ul id="test">
<li> Hello world </li>
<li> Hello world 2 </li>
</ul>
<form id="myform" action="xxx.yyy.zz" method="get">
<input id="input" name="myinput" type="text" />
</form>
</body>