background change width if over javascript or jquery - javascript

hello I have postet I don't know over 20 posts but nobody has understand me hahah -.-
so i have "draw" a structure I think thats the easiest way to let you understand my problem, because i can't write javascript or jquery so i hope you can help me...
idea then a var is coming over main.js '(var 323) then ask for the subfolder if exist
change the value of var 1 to var 323
else change the value of var 1 to "default";
('backgrounds/<script type="text/javascript">value 1</script>/1.jpg;')
heres the structure http://i.stack.imgur.com/b22sj.png
can you make a reconstruction of this :/ ?

My assumptions :
You are in need to generate style rule using php script.
Depending on a decision, you need to pick a background image and apply to an element.
Points:
Your php file should contain a function which returns the final style rule.
You will call that function in you .js file like this:
var element = document.getElementById("your_element_id_for_which_
you_are_trying_change_background");
element.style.background = url("<?php $that_function_which_returns_image_path ?>");
Finally, Forget about that external style.php you are trying to make.
You know ? Style sheets end with .css extention as a convention

Related

How to get element from HTML stored in variable

I am running an API to retrieve email from external system. I managed to get HTML code from the returned JSON and store it in a variable. Now, I would like to run some further operations on this HTML - for example get all elements with
[data-type="whatever"].
It would be easy in html document:
var x = document.querySelectorAll('[data-type="whatever"]');
However the HTML document I want to work with is stored in the variable so the code I write in API does not recognise it as a document. How can I do it? Any suggestions with vanilla JS?
You can try something like this.
let rawDoc = '<html><head><title>Working with elements</title></head><body><div id="div1">The text above has been created dynamically.</div></body></html>'
let doc = document.createElement('html');
doc.innerHTML = rawDoc;
let div1 = doc.querySelector('#div1');
console.log(div1)
What if you use innerHTML? or maybe I don't fully understand the question.
Since you are working without a document you have 2 options.
1. Use regex to get what you need (something like /<.+>.+ data-type="whatever".+<\/.+>/gi) should do (but for an exact match you may need to make something better).
2. Insert the html in a hidden part of the dom and select what you need from it (like in Zohir answer - he provided a good example).
I used following code with angular to store whole html content in a variable and pass it as argument to call API.
var htmlBody = $('<div/>').append($('#htmlBody').clone()).html();
This might work for you as i was working on sending email to pass invoice template so try this.

jQuery - replicate date from field 1 to field 2

I'm currently looking to run a simple script using jQuery and TamperMonkey as I'm doing a recurent job which is time consuming and that should be pretty basic, not sure how to achieve the below (I've recorderd a gift) - I'm new to jQuery/coding, but searching arround, using this:
//Get
var IPG = $('#txt_name').val();
//Set
$('#txt_name').val(IPG);
might be where to look at?
the script should scan the field IPG ID where -1 are present, copy the name from the channel description and copy it to IPG description
https://gyazo.com/f4bd243827df598edfdd78ec1a2d53b5
any help in achieving this would be appreciate,
many thanks,
I named HTML elements' ids by myself because I simply don't know what are those fields' id named in your app.
What you are trying to achieve it is really simple and this code can do you the trick:
var IPG = $('#IPGid').val();
if (IPG==-1)
{
var toCopy = $('#ChannelDescription').val();
$('#IPGDesc').val(toCopy);
}
Note:
This can only be done once the page is loaded it is not live for every action.
This cannot treat all lines of the table you should figure your way out of how turning it dynamic to the whole table.

Format integer thousands separator throughout the document

After months of web-development, I find myself completely helpless trying to find a good solution for a simple problem of formatting all the numbers throughout the DOM as I wish. Specifically, I have a js function my_int_formatter(), that I want to apply to all integers after the doc has been loaded. Best descriped by example - I want to do something like
<td>my_int_formatter({{django_variable}})</td>
I know the code above won't work, because I have to include 'script' tag, but first, I don't like the messy code, and second, javascript won't recognize python variable
I tried the following way:
HTML
<td class = 'my_integer'>{{django_variable}}</td>
JS
$(document).ready(function(){
// ....
content = $('.my_integer').html();
$('.my_integer').html(my_int_formatter(content));
...but as expected, I got wrong results because the js code applied the same html() content of the first .my_integer element in the DOM chain to all the others. Any ideas how to do this the short and correct way ?
If I understand correctly, your problem isn't with the formatting but actualy applying the formatting to each of your dom elements.
Try using jquerys .each() function and using $(this).html() to actualy grab the content.
$('.my_integer').each(function(){
content = $(this).html();
$(this).html(content+"formatted");
});
here's a quick fiddle :
https://jsfiddle.net/57rdq2a0/2/
If I understand you correctly, you want to use builtin django.contrib.humanize application: https://docs.djangoproject.com/en/1.9/ref/contrib/humanize/
You can format integers using some predefined filters, for example intcomma:
4500 becomes 4,500.
45000 becomes 45,000.
450000 becomes 450,000.
4500000 becomes 4,500,000.
Usage in your case would be like
{% load humanize %}
<td>{{django_variable|intcomma}}</td>
Also don't forget to include the app in INSTALLED_APPS
Also this question might be useful
If you want to apply filter to all variables of some kind, I suggest you to use Middleware to fiddle with response before rendering.

JavaScript: Change objectHTMLScriptElement

I am currently working within a CMS, cleaning up 12 websites.
Currently there are 12 identical JS files each residing within their respective site. Since they are all the same, my first initiative is to point every site to a single JS file that lives on the server.
Because I'm working within a CMS, I would have to open up 200 templates to accomplish this feat manually, so I'd, of course, rather do this dynamically.
Here is what I have done, so far:
var scripts = document.getElementsByTagName ("script");
console.log(scripts[15]);
My console.log statement returns what I'd like to replace, which is this:
<script src="/Assets/AmericanTower.com.br/uploads/content/js/main.js">
When I use alert(); rather than console.log(); I get this:
[object HTMLScriptElement]
I don't really understand why alert and console.log are showing me 2 different results.
So, I gather that I need to find a way to convert this HTMLElement to a string and then replace the string(or part of it) with the path to my new JS file.
Can anyone please shed some light?
Thank you in advance!
Robin
===============================
Thank you, L.C. Echo Chan, for your contribution. Here's how I used your suggestion and it worked like a charm!
var scripts = document.getElementsByTagName("script");
var jsPath=scripts[15].outerHTML;
var changedURL=jsPath.replace(jsPath,"RegionalGlobalAssets");
alert(changedURL);
Using outerHTML property can return the entire element
var scripts = document.getElementsByTagName("script");
alert(scripts[15].outerHTML);
Try to set you code as that
var scripts = document.getElementsByTagName("script");
console.log(scripts[15]);

Cannot insert HTML value into another

I'm trying to have the value of an HTML element equal the value of another. Sounds simple enough but when I try various options, it doesn't work
Here's what I'm trying to do:
I tried a few things. First, I made a javascript function that when they info button is pressed, it simply sets the value of the newname textbox to the title and then I was going to use javascript to trim off the extension. As you can see on the page, it simply outputs {{modal_header}}. I believe this is because when the function is being called, the value hasn't been set yet and that's why it's outputting this. I couldn't find out where else to call the function in order for it to work.
To get around that issue, I tried using PHP to retrieve the name. The only thing I could find related to the name was which in stuck in the value property of newname, but this output only the last file in the directory, no matter what file you selected.
I tried a bunch of different little things, but without any luck. You guys have any ideas?
Website: http://box.endurehosting.com/
HTML: http://pastebin.com/dZ5rKGUY
try this code
$(function(){
var title = $("#title").html();
title = title.substr(0, title.indexOf('.'));
$("#newname").val(title);
})

Categories

Resources