Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
How to change text size of the link when people visits it?
It is possible to change link text size when like 1000 visitors from a different IP address clicks on it? Currently i have a page with a lot of links and I need to separate them with different text size so users can see the most important links. ( It's like keywoard function).
Here is some examples:
//SQL
CREATE TABLE keywords (
keyword_id int(11) NOT NULL AUTO_INCREMENT,
keyword varchar(200) NOT NULL,
keyword_count int(5) NOT NULL,
PRIMARY KEY(keyword_id)
)
//PHP
<?php
//Write your select query here
while($row = $result->fetch())
{
switch($row['count']) {
//Add more cases if you want
case 10:
echo "<span class='row-count-10'><a href='lol.php?keywordid=".$row['keyword_id']."'>".$row['keyword']."</a></span>";
break;
default:
echo "<span class='row-count-default'><a href='lol.php?keywordid=".$row['keyword_id']."'>".$row['keyword']."</a></span>";
}
}
?>
<?php
//lol.php
$keyword = $_GET['keywordid'];
//INSERT STATEMENT
?>
//style.css
.row-count-default {
font-size:10px;
}
.row-count-10 {
font-size:12px;
}
Parse visits on server side and pass metrics to view as JSON
Adjust links on page load with javascript "for loop"
See it here: FIDDLE
Javascript:
var json = JSON.parse('{"link_1":2,"link_2":3,"link_3":7,"link_4":2}');
var base_size = 12;
for (var link in json){
document.getElementById(link).setAttribute("style","font-size:" + (json[link] * base_size) + "px;");
//alert(json[link]);
}
HTML:
<a id="link_1">Link 1</a>
<a id="link_2">Link 2</a>
<a id="link_3">Link 3</a>
<a id="link_4">Link 4</a>
<a id="link_5">Link 1</a>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 months ago.
Improve this question
I have to run a PHP action that is inside HTML which is inside a JS script. The current code does an error because the function that renders HTML breaks the syntax. I am getting Uncaught SyntaxError: Unexpected token '='
Here is my code example:
<script type="text/javascript">
(function($) {
$('.menu-main').on('click', function() {
var page = window.location.href;
var mobile = $('.menu-item-mobile');
var search = '<div class="wpml-language-switcher">'<?php do_action('wpml_add_language_selector'); ?>'</div>';
setTimeout(function() {
if(mobile.find('form').length == 1) return;
mobile.html(search);
}, 50); //delay time
});
})(jQuery);
</script>
Here is the output with failed structure in line 8 (Uncaught SyntaxError: Unexpected token '='):
<script type="text/javascript">
(function($) {
$('.av-burger-menu-main').on('click', function() {
var page = window.location.href;
var mobile = $('.menu-item-search-mobile');
var search = '<div class="wpml-floating-language-switcher">'
<div
class="wpml-ls-statics-shortcode_actions wpml-ls wpml-ls-legacy-dropdown js-wpml-ls-legacy-dropdown" id="lang_sel">
<ul>
<li tabindex="0" class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-lv wpml-ls-current-language wpml-ls-first-item wpml-ls-item-legacy-dropdown">
<a href="#" class="js-wpml-ls-item-toggle wpml-ls-item-toggle lang_sel_sel icl-lv">
<img
class="wpml-ls-flag iclflag"
src="https://sampledomain.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/lv.png"
alt=""
width=18
height=12
/><span class="wpml-ls-native icl_lang_sel_native">LV</span></a>
<ul class="wpml-ls-sub-menu">
<li class="icl-en wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-en">
<a href="https://sampledomain.com/en/" class="wpml-ls-link">
<img
class="wpml-ls-flag iclflag"
src="https://sampledomain.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/en.png"
alt=""
width=18
height=12
/><span class="wpml-ls-native icl_lang_sel_native" lang="en">EN</span></a>
</li>
<li class="icl-ru wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-ru wpml-ls-last-item">
<a href="https://sampledomain.com/ru/" class="wpml-ls-link">
<img
class="wpml-ls-flag iclflag"
src="https://sampledomain.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/ru.png"
alt=""
width=18
height=12
/><span class="wpml-ls-native icl_lang_sel_native" lang="ru">RU</span></a>
</li>
</ul>
</li>
</ul>
</div>
'</div>';
setTimeout(function() {
if(mobile.find('form').length == 1) return;
mobile.html(search);
}, 50); //delay time
});
})(jQuery);
</script>
Is there anything possible to avoid the syntax error?
If I were you I'd put the PHP contents into a template tag and grab the contents with jQuery. For example...
<script type="text/template" id="template-wpml_add_language_selector">
<?php do_action('wpml_add_language_selector'); ?>
</script>
<script type="text/javascript">
(function($) {
$('.menu-main').on('click', function() {
var templateContents = $('#template-wpml_add_language_selector').html();
var page = window.location.href;
var mobile = $('.menu-item-mobile');
var search = '<div class="wpml-language-switcher">' + templateContents + '</div>';
setTimeout(function() {
if(mobile.find('form').length == 1) return;
mobile.html(search);
}, 50); //delay time
});
})(jQuery);
</script>
I am trying to create a simple FAQ page where the user clicks the question and the answer appears below it (or hides it, if clicked again).
I got it working up to a point where all the questions will show the answer labeled "ans1". But I would like to pass a variable from each question into the function so it makes the associated answer appear. Question 1 will show Answer 1, Question 2 -> Answer 2, and so on.
My function...
function theAnswer() {
var x = document.getElementById("ans1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
PHP...
<?php
$answer = 1;
foreach($faqArray as $faq) {
?>
<div class='product_container'>
<div class='product_cell'>
<a onclick="theAnswer()" href='#'>
<?php echo $faq[0];?>
</a>
</div>
</div>
<div class="answer" id="ans<?php echo $answer;?>" style="display:none;">
<p><?php echo $faq[1];?></p>
</div>
<?php
$answer = $answer + 1;
} ?>
If I put a variable in the onclick="theAnswer()" that dictates the associated div, how can I get the function to perform the desired result?
Thanks!
Your PHP code is run server-side and your Javascript code is run client-side. So the two codes cant interact with each other. I recommend hiding your element with CSS use something like this:
.hide{
display : none
}
and set your your div to hide like this
<div class='hide' id='answer-<?php echo $answer;?>'> .... </div>
and you would remove hide from your element's class list like this
function theAnswer(num){
answer = document.querySelector('#answer-' + num)
answer.classList.remove('hide')
}
in your php code youd have to put in the value
.....
<a onclick="theAnswer('<?php echo $answer;?>')" href='#'>
.....
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want something similar to f" {variable} " of python
Ive tried
function press()
{
for(var i=0; i<4; i++)
{
if(!document.getElementById('ip'+i).value)
{
alert("error");
break;
}
}
but it didnt work.
I want something similar to f" {variable} " of python
template strings ${variable}
In JavaScript you can use template strings
The usage is
` ${variable} `
document.getElementById('btn').addEventListener('click', press)
function press() {
for (var i = 0; i < 4; i++) {
if (!document.getElementById(`ip${i}`).value) {
alert("error");
break;
}
}
}
<input id="ip0"/>
<input id="ip1"/>
<input id="ip2"/>
<input id="ip3"/>
<button id="btn">Click</button>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
One question:
<button (click)="activateMotion(1)">
<img class="emotion-icon" id="positive-icon" src="" />
</button>
<button (click)="activateMotion(-1)">
<img class="emotion-icon" id="negative-icon" src="" />
</button>
I have two buttons with the value is an image. I want to write a function call : activateMotion(). I want to change the image inside the button base on the value 1 or -1. I can use jQuery to achieve the goal here, but I am writing the app in Angular.
Your question is too broad, since you apparently haven't tried anything yet, but it'll look like this:
<button [innerHTML]="myComponentVariableName"></button>
Then, in your function, you'll conditionally render the image:
let myComponentVariableName = '';
if (something) {
myComponentVariableName = '<img ... />';
} else {
myComponentVariableName = '<img ... />';
}
You could also put the image in the markup and just change the source attribute.
<button><img [src]="myComponentVariableName" /></button>
You could also you a template reference to your image element and pass it in your function call, then set the src attribute:
<button (click)="activateMotion(1, img1)">
<img #img1 class="emotion-icon" id="positive-icon" src="" />
</button>
<button (click)="activateMotion(-1, img2)">
<img #img2 class="emotion-icon" id="negative-icon" src="" />
</button>
const src1 = '...';
const src2 = '...';
activateMotion(value: number, img: HTMLElement): void {
if (value === 1) {
img.setAttribute('src', src1);
} else {
img.setAttribute('src', src2)
}
}
Or simpler, you change the src via input binding on the image:
<img [src]="..." />
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
So I've created a jquery call to check if an image in a series of images with the same account name: .account-img, are clicked.
I load the images through PHP like so:
<?php
foreach($accountsArray as &$acc) {
echo ('
<!--<div class="col-md-2 col-sm-6">-->
<img class="img-thumbnail account-img" src="https://twitter.com/'.$acc['screen_name'].'/profile_image?size=original" alt="Profile Image" id="img-'.$acc['screen_name'].'" />
<!--</div>-->
');
}
?>
Shorthand for the image is as follows:
<img class="img-thumbnail account-img" src="https://twitter.com/BBCNews/profile_image?size=original" alt="Profile Image" id="img-BBCNews" />
Here is the JQuery i use to call the image clicks:
$('.account-img').each(function() {
var id = $(this).attr('id').split('-');
var name = id[1];
$(this).on('click', function() {
alert(name);
});
});
EDIT:
It won't be a single element because of the PHP code i'm actually using. it will be multiple elements and i want to perform an action based on each individual image. But because my ID isn't known beforehand, I need to do it this way
You have to user click trigger for that as below code.... And for get current image click you use this inside click trigger....
$('.account-img').click(function(){
alert($(this).attr("id"));
});
There would be no reason to foreach the element if you're going to add a click handler on it. Removing the foreach would be enough.
$(document).ready(function () {
$('.account-img').on('click', function() {
var id = $(this).attr('id').split('-');
var name = id[1];
console.log(name);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img-thumbnail account-img" src="https://twitter.com/BBCNews/profile_image?size=original" alt="Profile Image" id="img-BBCNews" />
try this:
$(document).ready(function(){
$('.account-img').each(function() {
var id = $('#img-BBCNews').attr('id').split('-');
var name = id[1];
$('#img-BBCNews').on('click', function() {
alert(name);
});
});
});