I want to forward the user to other pages by letting them choose the appropriate image. There is a problem when the user chooses two images. I don't know how to set forwarding when the user chooses these 2 images, any ideas? Here's the tool that I used %windir%\Temp folder . Thanks you guys for help!
<html>
<head>
<!-- scripts for imagepicker -->
<link rel="stylesheet" href="assets/css/image-picker.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/image-picker.js"></script>
<script type="text/javascript">
"use strict";
//wait for the page to be fully loaded
window.onload = function() {
initialize();
}
</script>
<title></title>
</head>
<body>
<div class="container">
<br> <br> <br> <br>
<div class="jumbotron">
<!-- 2 obrazki -->
<div class="row">
<div class="col-xs-6 col-md-3"></div>
<center>
<select multiple="multiple" class="image-picker show-html" id="selectImg">
<div class="col-xs-6 col-md-3 flags container" >
<option class="col-xs-6 col-md-3 flags" data-img-src="assets/media/img/german.png" value="1"></option>
</div>
<div class="col-xs-6 col-md-3 flags container" >
<option class="col-xs-6 col-md-3 flags" data-img-src="assets/media/img/spain.png" value="2"></option>
</div>
</div>
</select>
</center>
<!-- 2 obrazki -->
</div>
<div class="form-group container">
<center>
<p>Kliknij tu i <br><a id="forwardButton" class="btn btn-lg btn-success" type="submit" href="#" role="button">Dołącz do Poliglotów</a></p>
</center>
</div>
</form>
</div>
</div>
<!--SCRIPTS imgpickr DON'T TOUCH-->
<script>
$("select").imagepicker();
function initialize() {
var choice; //= document.getElementById("selectImg").value;
//changes destination when you set or change your choice
document.getElementById("selectImg").onchange = function() {
choice = document.getElementById("selectImg").value;
}
//when button is clicked
document.getElementById("forwardButton").onclick = function() {
if(choice == 1){
window.location = "https://www.google.com";
}
else if(choice == 2){
window.location = "https://www.facebook.com";
}
else if(choice == 1 && choice == 2){
window.location = "https://www.twitter.com";
}
}
}
</script>
</body>
</html>
Look at this example answered before: How to get all selected values of a multiple select box using JavaScript?
Related
I have some code where I need to hide a div if another is empty.
Basically, if .plant_profile_link has no content, hide .plant_profile_display
My attempt
$(document).ready(function() {
if (!$.trim($(".plant_profile_link").html()) == true)
$(".plant_profile_display").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_text_inner">
<div class="plant_profile_display">Bobo</div>
</div>
</div>
<!-- .et_pb_text -->
<div class="et_pb_module et_pb_text et_pb_text_7_tb_body et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
Your code works if we add jQuery
I would user toggle
$(function() {
$(".plant_profile_display").toggle($(".plant_profile_link").text().trim() !== "");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_text_inner">
<div class="plant_profile_display">Bobo</div>
</div>
</div>
<!-- .et_pb_text -->
<div class="et_pb_module et_pb_text et_pb_text_7_tb_body et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
Maybe something like this suits you
$(document).ready(function() {
var $plantLinks = $('.plant_profile_link')
var $plantDisplay = $('.plant_profile_display')
if($plantLinks.children().length > 0 || $plantLinks.text().length > 0) {
$plantDisplay.show();
} else {
$plantDisplay.hide();
}
});
I'm working on a MVC application. One of the pages contains a row and two columns.
When you resize the window to a certain width it automatically puts the second column under the first one.
I'm using the bootstrap grid system to achieve this.
<div class="row">
<div id="draftContainer" class="col-md-6 col-sm-6 col-lg-6">
...
(Some content)
...
</div>
<div id="releaseContainer" class="col-md-6 col-sm-6 col-lg-6" >
...
(Some other content)
...
</div>
</div>
I would like to know if its possible to somehow fire an event when the second column drops under the first and then call a javascript function.
The case is, that I have some CSS classes that should be added and removed depending on whether theres one or two columns.
I hope you get the idea.
Thanks in advance
I want to help
https://codepen.io/sinandogan/pen/YzpwvRL
<div class="row">
<div id="draftContainer" class="col-md-6 col-sm-6 col-lg-6">
...
(Some content)
<input type="hidden" id="css1" value="<style>#draftContainer{background:#d8ffc0} #releaseContainer{background:#eee}</style>" />
...
</div>
<div id="releaseContainer" class="col-md-6 col-sm-6 col-lg-6" >
...
(Some other content)
<input type="hidden" id="css2" value="<style>#draftContainer{background:#eee} #releaseContainer{background:#f44336}</style>" />
...
</div>
</div>
<div id="appendStyle"></div>
<script>
function control(){
if($('body').width() > 766){
$('#appendStyle').html($('#css1').val());
}else{
$('#appendStyle').html($('#css2').val());
}
}
//first run
control();
$(document).ready(function() {
$(window).resize(function(){
control();
});
});
</script>
run1Style = '<style>#draftContainer{background:#d8ffc0} #releaseContainer{background:#eee}</style>';
run2Style = '<style>#draftContainer{background:#eee} #releaseContainer{background:#d8ffc0}</style>';
function control(){
if($('#controlDM:visible').length == 0){
$('#appendStyle').append(run1Style);
}else{
$('#appendStyle').html(run2Style);
}
}
//first run
control();
$(document).ready(function() {
$(window).resize(function(){
control();
});
});
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row">
<div id="draftContainer" class="col-md-6 column ui-sortable">
<div id="controlDM" class="d-none d-md-block"></div>
1111
</div>
<div id="releaseContainer" class="col-md-6 column ui-sortable">
2222
</div>
<div id="appendStyle"></div>
</div>
I am trying to build a social network site and in order for post's to keep on updating I've set an interval time of 20 seconds so it refreshes the page and show's new comments and or post's.
My problem now is that when a user is trying to input a comment in my form, the page is running through the interval and as soon as it hit's 20 seconds the page refreshes and the text input deleted.
I want to set the interval function so that it will start counting if no one had typed anything anywhere in the page for about 10 seconds.
I can't give an input ID since the comment's are bound to post's and by that do not have a static ID for reference.
Is there a way to do what I just described?
that's the code of the page I want to stop the interval temporarily:
<?php
session_start();
if(!isset($_SESSION['login_user'])){ // check whether a session is set or not
header('Location: registrationPage.php'); // Redirecting To Registration Page
}
include 'connectDB.php';
$FN = $_SESSION['login_user'];
$result = mysqli_query($conn, "SELECT concat(U.firstName,' ',U.lastname) as fullName FROM tblUser U where U.userName='$FN'");
while($row = mysqli_fetch_array($result)){
$UN = $row['fullName'];
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Main page">
<meta name="author" content="Sorokina E. and Menaker T.">
<title>Main page</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<href='https://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../files/connection.json" type="text/jason"></script>
<script src="../files/positions.json" type="text/jason"></script>
<script src="../files/messages.json" type="text/jason"></script>
<link rel="stylesheet" type="text/css" href="../css/mystyle.css">
<script src="../js/typeahead.min.js"></script>
</head>
<body>
<div class="row alignT bg_color7">
<div class="col-sm-1">
<img class="img-responsive" src="../images/logo.gif" alt="">
</div>
<div class="col-sm-1">
<?php
if(isset($_SESSION['login_user'])){
echo '<span >Welcome ' . $UN. '! </span>';
}
?>
</div>
<div class="col-sm-1">
<span class="glyphicon glyphicon-home"></span>
</div>
<div class="col-sm-1">
<span class="glyphicon glyphicon-user"></span>
</div>
<div class="col-sm-1 " data-toggle="tooltip" title="My connections" >
<button id="NL" class="Tbutton " type="button">
<span class="glyphicon glyphicon-globe " style="vertical-align:middle; " ></span>
</button>
<div id="NC" class="notificationContainer">
<div id="NT" class="notificationTitle">My friends:</div>
<div id="NB" class="notificationsBody forConnection">
<?php include ('selectAllFriends.php');?></div>
<div id="NF" class="notificationFooter">See All</div>
</div>
</div>
<div class="col-sm-2 ">
<span > <input id="search" name="typehead" class="typeahead" data-provide="typeahead" placeholder="Search people" ></input></span>
</div>
<div class="col-sm-1 mm">
<span><input type="button" onclick="location.href = 'allUsersPage.php';" class="btn btn-info" value="All people" ></span>
</div>
<div class="col-sm-1 " data-toggle="tooltip" title="My messages" >
<button id="NL1" class="Tbutton " type="button">
<span class="glyphicon glyphicon-envelope" style="vertical-align:middle; " ></span>
</button>
<div id="NC1" class="notificationContainer">
<div id="NT1" class="notificationTitle">My Messages:</div>
<div id="NB1" class="notificationsBody forMessages">
<?php include ('selectAllMessages.php');?></div>
<div id="NF1" class="notificationFooter">See All</div>
</div>
</div>
<div class="col-sm-2 " data-toggle="tooltip" title="My notifications" >
<button id="NL2" class="Tbutton " type="button">
<span class="glyphicon glyphicon-flag" style="vertical-align:middle; " ></span>
</button>
<div id="NC2" class="notificationContainer">
<div id="NT2" class="notificationTitle">My Notifications:</div>
<div id="NB2" class="notificationsBody forNotifications"></div>
<div id="NF2" class="notificationFooter">See All</div>
</div>
</div>
<div class="col-sm-1">
<span class="glyphicon glyphicon-log-out"></span>
</div>
</div>
<div class="row">
<p class="alignW"><input class=" col-sm-5" type="text" name="mind" id="textField9" placeholder="Share your mind">
<span class=" col-sm-1"></span> <input type="button" id = "btn_submit" class="btn btn-info col-sm-1" value="Add post" ></p>
</div>
<div class="row" id="middle">
<div class="col-sm-8" id="left">
<?php include ('selectAllPosts.php'); ?>
</div>
<div class="col-sm-4" id="right">
<?php include ('select5Positions.php'); ?>
</div>
</div>
<!--Footer-->
<footer class="container-fluid text-center">
<p class="glyphicon glyphicon-copyright-mark"> Created by ... </p>
</footer>
<script>
$(document).ready(function(){
var timer = null;
function autoRefresh_div()
{
$('#left').load("selectAllPosts.php");// a function which will load data from other file after x seconds
}
$(document.body).keydown(function(event){
clearTimeout(timer);
timer = setTimeout(setInterval(function(){ autoRefresh_div() }, 20000), 5000);
});
$("#btn_submit").click(function(){
var userName='<?php echo $FN; ?>';
var content = $('#textField9').val();
var postData = '&uname='+userName+'&content='+content;
$.ajax({
url : "insertPost.php",
type: "POST",
data : postData,
success: function(data,status, xhr){
if(data==="You have successfully posted!"){
$('#textField9').val('');
}
if(data==="ERROR"){
$('#textField9').val('');
}
}
});
});
$('#search').typeahead( {
name:'typehead',
remote: 'selectAllUsers.php?query=%QUERY'
});
//search for all users and go to their pages
$('#search').on('typeahead:selected', function(evt, item){
window.location.href = "userPage.php?fullName="+item.value;
});
$.getJSON("../files/notifications.json",function(result){
$.each(result, function (index, value) {
$(".forNotifications").append("<div class=\"divStyle1\">" +value.Notification + "</div>");
});
});
$("#NL").click(function(){
$("#NC2").hide();
$("#NC1").hide();
$("#NC").fadeToggle(300);
return false;
});
$("#NL1").click(function(){
$("#NC").hide();
$("#NC2").hide();
$("#NC1").fadeToggle(300);
return false;
});
$("#NL2").click(function(){
$("#NC").hide();
$("#NC1").hide();
$("#NC2").fadeToggle(300);
return false;
});
$('#myButton').click(function (){
$(this).hide();
}
);
});
</script>
</body>
</html>
Thank you.
Tom
There are multiple ways you could do this either by making an AJAX Request to retrieve new data or even use Websockets (Which is the most efficient). However, the simplest approach to fixing your problem would be to create a timer via JS when the page loads.
<!-- Element -->
<input type="text" data-ui="post"/>
<!-- Script -->
<script>
$(document).ready(function(){
var timer = null;
function startTimer() {
timer = setInterval(function() {
window.location.reload();
}, 1000);
}
// Stop timer by clearing with interval when
// the user focuses on the element
$('[data-ui]').on('focus', function() {
clearInterval(timer);
});
// Start the timer once the user has blurred away from
// the element
$('[data-ui]').on('blur', function() {
startTimer();
});
// Start the timer as the page has finished loading
startTimer();
})
</script>
The basically stops the window location.reload timer once the user has focused an element that has a [data-ui] attribute tag attached to it. Another method would be to save your inputs content with LocalStorage and reinsert the content into the input box once the page has reloaded.
Let me know if you need a jQUERY'less version.
I can't understand why my function doesn't fire, maybe I'm wrong with the selector ?
HTML:
<html>
{% include head.html %}
<body id="general">
<header>
{% include navbar.html %}
<script>
$('input[name=optradio])'.click(function () {
if (this.id == "showdiv") {
$("#onsaanbod").show('slow');
} else {
$("#onsaanbod").hide('slow');
}
});
</script>
</header>
<div class="container-fluid">
<!-- contenttop -->
<div class="row" style="padding-top: 3%; padding-bottom: 3%;" >
{% include /getaquote/contenttop-getaquote.html %}
</div>
<div class="col-md-12 col-lg-10 col-lg-offset-2">
<div class="row">
<div class="col-md-12">
<p> content </p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<!-- start-form -->
<!-- Volume -->
<div class="row">
<div class="col-md-6">
<p> content </p>
</div>
<div class="col-md-6">
<div class="controls">
<form id='form-id'>
<div class="radio">
<label><input type="radio" name="optradio">Meer dan 1000 per jaar</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Tussen 500 en 1000 per jaar</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" id="showdiv">Minder dan 500 per jaar</label>
</div>
</form>
</div>
</div>
</div>
<div class="row" id="onsaanbod" style='display:none'>
<div class="col-md-12">
<h1 class="titlel1"> content </h1>
<p> content </p>
</div>
</div>
</div>
I want to display the second div when the user clicks on the third radio button.
I tried to change the position of the script but I don't think it is the problem.
I'm sure that It is a trivial issue.
It doesn't work!
<!-- footer -->
{% include footer.html %}
</div>
</body>
There's a typo:
$('input[name=optradio])'.click
$('input[name=optradio]').click
and
You should move your js at the bottom of the body, or wrap it in a $(document).ready() method
$(document).ready(function(){
$('input[name=optradio]').click(function () {
if (this.id == "showdiv") {
$("#onsaanbod").show('slow');
} else {
$("#onsaanbod").hide('slow');
}
});
});
It is to make sure the element exists when you apply che click listener to it
You'll have to wrap your code in
$(document).ready(function(){
//Code
});
This will ensure the script fires after the page has loaded and thus has it resources to use. In your case your code would look like this:
$(document).ready(function(){
$('input[name=optradio]').click(function () {
if (this.id == "showdiv") {
$("#onsaanbod").show('slow');
} else {
$("#onsaanbod").hide('slow');
}
});
});
You must wrap your code into:
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});
There is some reference.
Wrap the whole code inside:
$(document).ready(function(){
// Here..
});
This will execute only after all the DOM Elements are loaded.
If you are already taking id, why not use it on first hand?
Make sure you have 1.7+ version of jquery to use prop
<script>
$(document).ready(function()
{
$('#showdiv').click(function()
{
if($(this).prop("checked"))
{
$("#onsaanbod").show('slow');
}
else
{
$("#onsaanbod").hide('slow');
}
});
});
</script>
For some reason, i have this two functions in my javascript, and both seems to work.
The first one, is when user click on one of two divs, it will show the other div, depending on wich was clicked.
The second one, is when the user is on the second div, and clicks on back.
All this is working, but when the user return to the first div, and i click on one of two divs, this isnt going to the second div.
It's closing both divs.
First Div with two options:
<div class="firstQuestion">
<div class="male" onclick="secondQuestion(this);"></div>
<div class="female" onclick="secondQuestion(this);"></div>
</div>
Second div, with back button:
<div class="secondQuestion">
<form class="formAconselhamento" id="male">
<input type="button" id="save_value_male" class="back" name="save_value" onclick="comeBack(this); return false;"/>
<input type="button" id="save_value_male" class="next" name="save_value" />
</form>
</div>
Javascript functions:
function secondQuestion(divID)
{
var clicado = $("#"+$(divID).attr('class'));
$(".firstQuestion").hide();
$("#"+$(divID).attr('class')).show();
}
function comeBack(divID)
{
var backButton = $(divID).attr('id');
if ( backButton == 'save_value_female' || backButton == 'save_value_male' )
{
$(".secondQuestion").hide();
$(".firstQuestion").show();
}
}
How can i resolve my issue?
In comeBack function you hide <div class="secondQuestion"> instead of <form class="formAconselhamento" id="male">
Try something like:
function comeBack(divID)
{
var backButton = $(divID).attr('id');
if ( backButton == 'save_value_female' || backButton == 'save_value_male' )
{
$(divID).closest("form").hide();
$(".firstQuestion").show();
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.maincat{background: #eef;}.subcat{background: #abc;}
</style>
</head>
<body>
<div class="maincat">
<div class="type" rel='one'>first</div>
<div class="type" rel='two'>second</div>
<div class="type" rel='three'>third</div>
</div>
<div class="subcat" style="display: none">
back
<div id="one">
first content
</div>
<div id="two">
second content
</div>
<div id="three">
third content
</div>
</div>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".type").click(function(){
$(".maincat").hide();
$("#" + $(this).attr('rel')).show().siblings().hide();
$('.subcat').show();$('.back').show();
});
$(".back").click(function(){
$('.subcat').children().hide();$(".maincat").show();
});
</script>
</body>
</html>